/* ============================================================
 * CSS del módulo "logistics" 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).
 * ============================================================ */

.labor-settings-tabs[aria-label="Secciones de logística"] {
    margin-bottom: 16px;
}

.labor-field--grow {
    flex: 1 1 220px;
}

/* ---- Formulario de alta de ITV/Seguro/Reparaciones/Limpiezas: tarjeta con
   título, grid de campos en columnas y un pie con el botón de acción, en
   vez de una fila apretada de inputs. ---- */
.logistics-entry-form {
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.logistics-entry-form__title {
    margin: 0 0 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.logistics-entry-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.logistics-entry-form__field--wide {
    grid-column: 1 / -1;
}

.logistics-entry-form__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
}

.logistics-entry-form__footer .button {
    padding: 10px 20px;
    font-weight: 700;
}

/* ---- Rejilla de fotos (vehículos y proveedores), con una tarjeta "+" al
   final para dar de alta uno nuevo, en vez de un botón suelto en la
   cabecera. ---- */
.logistics-photo-grid__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.logistics-photo-card {
    display: grid;
    grid-template-rows: 120px auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.logistics-photo-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}

.logistics-photo-card--inactive {
    opacity: 0.6;
}

.logistics-photo-card__photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-soft);
}

.logistics-photo-card__photo--placeholder {
    display: grid;
    place-items: center;
    font-size: 2.4rem;
}

.logistics-photo-card__body {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.logistics-photo-card__title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.logistics-photo-card__subtitle {
    font-size: 0.8rem;
    color: var(--text-soft);
}

.logistics-photo-card__delete {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}

.logistics-photo-card__delete:hover {
    background: var(--danger, #dc2626);
}

.logistics-photo-card--add {
    grid-template-rows: none;
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 168px;
    background: color-mix(in srgb, var(--primary) 4%, transparent);
    border-style: dashed;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.85rem;
}

.logistics-photo-card--add:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    transform: none;
}

.logistics-photo-card__add-icon {
    font-size: 2rem;
    line-height: 1;
}

/* ---- Lista de vehículos: una fila por vehículo, foto a la izquierda ---- */
.logistics-vehicle-rows {
    display: grid;
    gap: 8px;
    margin-bottom: 76px;
}

/* Dentro de las tarjetas de alertas del Dashboard no hay dock flotante
   debajo que reservar hueco, así que ese margen inferior sobra aquí. */
[data-logistics-dashboard-alerts] .logistics-vehicle-rows {
    margin-bottom: 0;
}

.logistics-vehicle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.logistics-vehicle-row:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.logistics-vehicle-row__photo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
}

.logistics-vehicle-row__photo .logistics-photo-card__photo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
}

.logistics-vehicle-row__photo .logistics-photo-card__photo--placeholder {
    font-size: 1.6rem;
}

.logistics-vehicle-row__body {
    flex: 1 1 160px;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.logistics-vehicle-row__title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.logistics-vehicle-row__subtitle {
    font-size: 0.8rem;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logistics-vehicle-row__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--text-soft);
    flex: 0 0 auto;
}

.logistics-vehicle-row__chevron {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: var(--text-soft);
}

/* Columnas de ITV / Seguro: etiqueta pequeña arriba (para que no haga falta
   adivinar cuál es cuál) y la fecha/estado como badge de color debajo. */
.logistics-vehicle-row__status-col {
    display: grid;
    justify-items: center;
    gap: 2px;
    flex: 0 0 92px;
    width: 92px;
}

.logistics-vehicle-row__status-col .labor-badge {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* Aviso en la propia pestaña ITV/Seguro de la ficha del vehículo, cuando
   está caducada: se nota sin tener que entrar a mirar. */
.logistics-vehicle-tab-alert {
    margin-left: 4px;
    font-size: 0.85em;
}

.logistics-vehicle-row__status-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft);
}

@media (max-width: 640px) {
    .logistics-vehicle-row__meta,
    .logistics-vehicle-row__status-col {
        display: none;
    }
}

/* ---- Pestaña "Información": layout en dos columnas (foto + asignado a la
   izquierda, secciones de datos a la derecha), inspirado en un diseño de
   referencia que pasó el usuario, pero con border-radius ≤3px en vez de las
   esquinas muy redondeadas del original. ---- */
.logistics-vehicle-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 720px) {
    .logistics-vehicle-layout {
        grid-template-columns: 1fr;
    }
}

.logistics-vehicle-layout__side {
    display: grid;
    gap: 14px;
}

.logistics-vehicle-photo-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.logistics-vehicle-photo-card__frame {
    position: relative;
}

.logistics-vehicle-photo-card__frame .logistics-photo-card__photo {
    width: 100%;
    height: 150px;
}

.logistics-vehicle-photo-card__frame .logistics-photo-card__photo--placeholder {
    font-size: 2.6rem;
}

.logistics-vehicle-summary__photo-edit {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    border: 1px solid #fff;
    background: var(--primary);
    color: var(--button-primary-ink, #fff);
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.logistics-vehicle-summary__photo-edit:hover {
    background: var(--primary-dark);
}

.logistics-photo-confirm-preview {
    width: 100%;
    height: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-soft);
}

.logistics-vehicle-photo-card__footer {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
}

.logistics-vehicle-photo-card__plate {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: var(--text);
}

.logistics-vehicle-photo-card__subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.logistics-assigned-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.logistics-assigned-card__person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logistics-assigned-card__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-soft);
    font-size: 1.1rem;
}

.logistics-assigned-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logistics-assigned-card__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.logistics-vehicle-layout__main {
    display: grid;
    gap: 16px;
}

.logistics-info-sections {
    display: grid;
    gap: 16px;
}

.logistics-info-section {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.logistics-info-section:hover {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

/* Mientras se edita, las secciones llevan un aro azul sutil para que quede
   claro de un vistazo que la ficha entera está en modo edición. */
.logistics-info-sections--editing .logistics-info-section {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
}

.logistics-info-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
}

.logistics-info-section__title-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
}

/* Cada campo es su propia "caja": etiqueta pequeña arriba, valor grande
   abajo, como un mini-dashboard de datos en vez de icono+texto en línea. */
.logistics-info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.logistics-info-box {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.logistics-info-box--wide {
    grid-column: 1 / -1;
}

.logistics-info-box__label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft);
}

.logistics-info-box__value {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--text);
    word-break: break-word;
}

.logistics-info-box__value--static {
    display: block;
}

.logistics-info-box__value:disabled {
    opacity: 1;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
    resize: none;
}

/* En modo lectura, un <select> deshabilitado no debe parecer interactivo:
   fuera la flechita nativa y el hueco reservado para ella. */
select.logistics-info-box__value:disabled {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 0;
}

.logistics-info-box__value:not(:disabled) {
    border: 1px solid var(--border);
    background: var(--input-bg);
    padding: 5px 8px;
    border-radius: var(--radius);
    font-weight: 600;
}

.logistics-assigned-card select.logistics-info-box__value {
    margin-top: 4px;
}

textarea.logistics-info-box__value {
    min-height: 2.4em;
    font-weight: 500;
}

.logistics-info-notes {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.logistics-info-notes p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text);
}

@media (max-width: 480px) {
    .logistics-vehicle-summary {
        flex-direction: column;
        text-align: center;
    }
}

.logistics-history-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.logistics-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.logistics-history-table th,
.logistics-history-table td {
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.logistics-history-table td.td--wrap {
    white-space: normal;
    min-width: 160px;
}

.logistics-history-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    background: var(--surface-soft);
}

.logistics-history-table tbody tr:last-child td {
    border-bottom: none;
}

.logistics-history-table tbody tr.logistics-history-row--expired {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

/* Todas las columnas de la tabla de excepciones con el mismo ancho. */
.dress-exceptions-table {
    table-layout: fixed;
}

.dress-exceptions-table th,
.dress-exceptions-table td {
    width: 16.6666%;
    white-space: normal;
}

.logistics-history-table__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.logistics-history-table__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.9rem;
}

.logistics-history-table__action-btn--edit {
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.logistics-history-table__action-btn--edit:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.logistics-history-table__action-btn--delete {
    color: var(--danger, #dc2626);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.logistics-history-table__action-btn--delete:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.logistics-history-table__creator {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.logistics-history-table__creator small {
    color: var(--text-soft);
}

/* Modales de alta/edición de ITV/Seguro/Reparaciones/Limpiezas: 2 columnas
   para que quepan más campos en menos alto (p. ej. las 2 fechas en la misma
   fila), en vez de una lista de campos apilados uno debajo de otro. */
.logistics-entry-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.logistics-entry-modal-grid .labor-field {
    margin: 0;
}

.logistics-entry-modal-grid__field--wide {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .logistics-entry-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* Avisos de guardado (foto, ficha, ITV...): banner con fondo de color y
   texto blanco en vez de texto suelto de color, para que se note de verdad
   que algo se ha guardado (o ha fallado). */
.logistics-status-banner {
    display: inline-block;
    padding: 6px 12px;
    margin: 8px 0 0;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.85rem;
}

.logistics-status-banner.status--success {
    background: #16a34a;
    color: #fff;
}

.logistics-status-banner.status--error {
    background: var(--danger, #dc2626);
    color: #fff;
}

/* ---- Vestuario laboral ---- */

.logistics-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.logistics-photo-grid--dress {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.logistics-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface);
}

.dress-garment-card__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.dress-garment-card__data {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.82rem;
}

.dress-garment-card__data strong {
    font-size: 0.92rem;
}

.dress-garment-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.dress-garment-card__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dress-garment-card__embroidery {
    margin-top: 8px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    overflow-x: auto;
}

.dress-garment-card__embroidery .labor-badge {
    font-size: 0.72rem;
    min-height: 22px;
    padding: 0 6px;
    flex: 0 0 auto;
}

.dress-wardrobe-card__embroidery {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dress-garment-card__departments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.dress-garment-card__department-chip {
    all: unset;
    box-sizing: border-box;
    padding: 3px 8px;
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.dress-garment-card__department-chip:hover,
.dress-garment-card__department-chip:active {
    background: var(--success-soft);
    color: var(--success, #1f8f5f);
}

/* Mientras se mantiene pulsado un departamento, se tachan en rojo los
   colores que ese departamento tiene vetados. */
.dress-garment-card__swatch-btn--restricted {
    position: relative;
}

.dress-garment-card__swatch-btn--restricted::after {
    content: "✕";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger, #c0392b);
    font-size: 0.85rem;
    font-weight: 900;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
    pointer-events: none;
}

.dress-garment-card__photo {
    position: relative;
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.dress-garment-card__season-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1.1rem;
    line-height: 1;
    z-index: 1;
}

.dress-garment-card__photo img {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 1;
    object-fit: contain !important;
}

.dress-garment-card__photo-fallback {
    font-size: 2.2rem;
}

.dress-garment-card {
    cursor: pointer;
}

.dress-garment-season-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.dress-garment-season-filter__btn {
    all: unset;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.dress-garment-season-filter__btn:hover {
    background: var(--surface-hover);
}

.dress-garment-season-filter__btn.is-active {
    background: var(--success, #1f8f5f);
    border-color: var(--success, #1f8f5f);
    color: #fff;
}

/* Siempre arriba a la derecha del header, independientemente de que en
   móvil el header pase a flex-direction: column (si no, los toggles caen
   debajo del título en vez de quedarse a su lado). */
.labor-card-section__header {
    position: relative;
}

.dress-request-toggles {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 6px;
    margin-bottom: 12px;
}

.dress-request-toggles__btn {
    all: unset;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dress-request-toggles__btn:hover {
    background: var(--surface-hover);
}

.dress-request-toggles__btn.is-active {
    background: var(--success, #1f8f5f);
    border-color: var(--success, #1f8f5f);
    color: #fff;
}

.logistics-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.logistics-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.logistics-card__actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.logistics-card__actions--wrap {
    flex-wrap: wrap;
}

.dress-garment-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

/* Ficha de prendas: compacta pero con aire suficiente para no verse
   apretada — tarjetas blancas con sombra suave, como el resto de paneles
   de la app, en vez de bloques pegados unos a otros. */
.dress-garment-form .labor-form__row {
    gap: 10px;
    margin-bottom: 8px;
}

.dress-garment-form .labor-field {
    gap: 3px;
}

.dress-garment-form .labor-card-section {
    padding: 12px 14px;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.dress-garment-form .labor-card-section__header {
    margin: -12px -14px 4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.dress-garment-form .labor-card-section__header h4 {
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-soft);
}

.dress-garment-form .labor-muted {
    font-size: 0.74rem;
    margin: 0 0 6px;
}

@media (max-width: 900px) {
    .dress-garment-form__grid {
        grid-template-columns: 1fr;
    }
}

.dress-active-switch__control {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.dress-garment-form__notes {
    display: block;
    margin-top: 16px;
}

.dress-garment-form__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

[data-dress-size-rows] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.dress-size-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: auto;
    background: var(--primary, #2f6fed);
    border: none;
    border-radius: var(--radius);
    padding: 3px 3px 3px 8px;
}

.dress-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}

.dress-color-row:last-child {
    margin-bottom: 0;
}

.dress-color-row:focus-within {
    border-color: var(--primary);
}

.dress-color-row__photo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dress-color-row__preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dress-color-row__preview-fallback {
    font-size: 1.3rem;
}

.dress-color-row input[data-dress-color-name] {
    flex: 1;
    min-width: 0;
}

.dress-color-row__swatch {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.dress-color-row__swatch::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.dress-color-row__swatch::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.dress-color-row__swatch::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

[data-dress-color-upload-slot] {
    flex: 0 0 auto;
}

[data-dress-color-upload-slot] button {
    width: 40px;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dress-color-remove {
    flex: 0 0 auto;
    width: 30px;
    min-width: 0;
    min-height: 30px;
    padding: 0;
    border: none !important;
    box-shadow: none !important;
}

/* La clase global .input (min-height 46px, padding grande, fondo verdoso al
   estar habilitado, border-radius 5px) tiene más especificidad que un simple
   ".dress-size-row input" y lo pisaba entero — por eso no se parecía en nada
   a una tag/píldora. Hace falta !important para ganarle aquí. */
.dress-size-row input,
.dress-size-row input:not(:disabled):not([readonly]),
.dress-size-row input:disabled {
    all: unset;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: 0.72rem;
    color: #fff !important;
    opacity: 1 !important;
    cursor: text;
}

.dress-size-row button {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    min-width: 0;
    min-height: 0 !important;
    padding: 0;
    line-height: 1;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: none !important;
    box-shadow: none !important;
}

.dress-size-row button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.35);
}

.dress-size-row button:disabled {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

/* ---- Checkboxes de la ficha de prendas como switches (radio 3px) ---- */

.dress-garment-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    background: var(--border-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dress-garment-form input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-radius: var(--radius);
    transition: transform 0.15s ease;
}

/* Los chips de departamento y los redondeles de color permitido usan la
   casilla como overlay invisible (no como switch): si no se anula también
   el ::before de arriba, el "pomo" blanco del switch se queda dibujado
   encima de todas formas. */
.dress-department-chip input[type="checkbox"]::before,
.dress-restriction-swatch input[type="checkbox"]::before {
    content: none !important;
    display: none !important;
}

.dress-garment-form input[type="checkbox"]:checked {
    background: var(--success, #1f8f5f);
    border-color: var(--success, #1f8f5f);
}

.dress-garment-form input[type="checkbox"]:checked::before {
    transform: translateX(16px);
}

.dress-garment-form input[type="checkbox"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dress-size-system-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dress-size-system-row select {
    flex: 1 1 auto;
    min-width: 0;
}

.dress-size-system-row button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dress-department-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 8px;
}

.dress-department-chip {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.dress-department-chip--parent {
    height: 26px;
    padding: 0 10px;
    font-size: 0.78rem;
}

/* Los hijos van la mitad de altos que su padre, y se justifican abajo
   dentro de su grupo (ver align-items: flex-end en el wrap). */
.dress-department-chip--child {
    height: 16px;
    padding: 0 8px;
    font-size: 0.62rem;
}

/* La casilla de verdad queda invisible encima de todo el chip: al pulsar en
   cualquier parte del chip se marca, y el estilo lo pone el propio chip
   (no el checkbox, que aquí no se ve). */
.dress-department-chip input[type="checkbox"] {
    all: unset !important;
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
}

.dress-department-chip--parent {
    background: var(--success-soft);
    color: #1f8f5f;
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.dress-department-chip--parent:has(input:checked) {
    background: var(--success, #1f8f5f);
    color: #fff;
    border-color: var(--success, #1f8f5f);
}

.dress-department-chip--child {
    background: var(--surface-soft);
    color: var(--text-soft);
    border-color: var(--border);
}

.dress-department-chip--child:has(input:checked) {
    background: #64748b;
    color: #fff;
    border-color: #64748b;
}

.dress-department-chip-wrap {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

.dress-department-collapse {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-width: 0;
    padding: 0;
    line-height: 1;
    font-size: 0.55rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    cursor: pointer;
    box-shadow: none;
}

.dress-department-collapse:hover {
    background: var(--surface-hover);
}

.dress-restriction-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

.dress-restriction-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 8px 10px;
    font-size: 0.82rem;
}

.dress-restriction-row__department + .dress-restriction-row__department {
    border-left: 1px solid var(--border);
    padding-left: 10px;
}

.dress-restriction-row strong {
    color: var(--text-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dress-restriction-row__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.dress-restriction-row__colors--inline {
    flex-wrap: nowrap;
    margin-top: 0;
    overflow-x: auto;
}

/* Redondel de color en vez del nombre: por defecto permitido (círculo
   normal); al marcar la casilla (invisible, cubre todo el chip) se tacha en
   rojo — significa "este departamento NO puede pedirlo en este color". */
.dress-restriction-swatch {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
}

.dress-restriction-swatch input[type="checkbox"] {
    all: unset !important;
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
    z-index: 1;
}

.dress-restriction-swatch__dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    transition: opacity 0.1s ease;
    pointer-events: none;
}

.dress-restriction-swatch__cross {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--danger, #c0392b);
    font-size: 1.1rem;
    font-weight: 900;
    pointer-events: none;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}

.dress-restriction-swatch input[type="checkbox"]:checked ~ .dress-restriction-swatch__cross {
    display: flex;
}

.dress-garment-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.dress-request-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 10px;
}

.dress-request-row__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.dress-request-row__header .logistics-card__actions {
    margin-left: auto;
}

.dress-request-row__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

/* Una tarjeta exterior por trabajador (foto/nombre/depto una sola vez), con
   UNA sola tabla dentro para todas sus líneas de cualquier colección (cada
   fila lleva su propia colección y su propio estado/stepper, porque
   normalmente unas prendas se sirven antes que otras). */
.dress-request-user-group {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 12px;
    background: var(--surface-soft);
}

.dress-request-user-group__header {
    margin-bottom: 8px;
}

.dress-request-item__collection-badge {
    white-space: nowrap;
}

.dress-request-item__signature-thumb {
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
}

.dress-request-item__status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dress-request-item__status-cell .button--small {
    min-height: 26px;
    padding: 0 8px;
    font-size: 0.74rem;
}

.dress-request-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.dress-request-stepper__step {
    all: unset;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: 0.78rem;
    font-weight: 600;
    box-sizing: border-box;
    color: var(--text-soft);
}

.dress-request-stepper__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 0.68rem;
    background: var(--surface);
}

.dress-request-stepper__step.is-done {
    color: var(--success, #1f8f5f);
}

.dress-request-stepper__step.is-done .dress-request-stepper__dot {
    background: var(--success, #1f8f5f);
    border-color: var(--success, #1f8f5f);
    color: #fff;
}

.dress-request-stepper__step.is-next {
    cursor: pointer;
    color: var(--text);
}

.dress-request-stepper__step.is-next .dress-request-stepper__dot {
    border-color: var(--success, #1f8f5f);
}

.dress-request-stepper__step.is-next:hover {
    text-decoration: underline;
}

.dress-request-stepper__step:disabled {
    cursor: default;
    opacity: 0.55;
}

.dress-request-stepper__line {
    flex: 0 0 16px;
    height: 1px;
    background: var(--border);
}

/* Mismo stepper, pero compacto para caber dentro de una celda de la tabla
   de líneas (cada prenda avanza su recibido/preparado/entregado por su
   cuenta, sin botones sueltos). */
.dress-request-stepper--item {
    margin-bottom: 0;
    gap: 2px;
}

.dress-request-stepper--item .dress-request-stepper__step {
    padding: 0;
}

.dress-request-stepper--item .dress-request-stepper__dot {
    width: 22px;
    height: 22px;
}

.dress-request-stepper--item .dress-request-stepper__line {
    flex-basis: 8px;
}

.dress-request-row__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px;
}

.dress-request-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 4px 8px;
    font-size: 0.82rem;
}

.dress-request-item__name {
    flex: 1 1 auto;
    font-weight: 600;
}

.dress-request-row__embroidery {
    margin-bottom: 8px;
}

.labor-badge--info {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-dark);
}

.dress-request-row__signature-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dress-request-row__actions {
    display: flex;
    gap: 8px;
}

.dress-override-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.dress-exception-card__worker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dress-override-user-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.dress-override-user-row .dress-override-user-search {
    flex: 1 1 auto;
}

.dress-override-add-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.dress-override-add-row [data-dress-override-add-quantity] {
    flex: 0 0 120px;
    width: 120px;
}

.dress-override-add-row [data-dress-override-add-pack] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Prendas de la excepción en dos columnas (verano/invierno) directamente en
   la página, cada una con su propio botón "+ Añadir" que abre un modal
   pequeño SOLO para elegir la prenda de esa temporada (o "todo el año"). */
.dress-add-prenda-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 10px;
}

.dress-add-prenda-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dress-add-prenda-column--card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    box-shadow: var(--shadow-soft);
    padding: 10px;
}

.dress-add-prenda-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dress-add-prenda-column__title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.dress-add-prenda-column__scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.dress-add-prenda-table {
    width: 100%;
}

.dress-add-prenda-row {
    cursor: pointer;
}

.dress-add-prenda-row:hover td {
    background: var(--surface-hover);
}

.dress-add-prenda-row--selected td {
    background: var(--success-soft);
}

/* Picker gráfico de una sola prenda: botón disparador + panel desplegable
   con tarjetas (foto, nombre, modelo, temporada) en vez del <select> plano. */
.dress-garment-picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.dress-garment-picker__trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg);
    padding: 4px 8px;
    cursor: pointer;
}

/* Ya añadida a la excepción: solo se puede quitar (🗑️) y volver a añadir,
   no cambiar la prenda ahí mismo. */
.dress-garment-picker__trigger--readonly {
    cursor: default;
    background: var(--surface-soft);
}

.dress-garment-picker__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.dress-garment-picker__label strong {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dress-garment-picker__label small {
    font-size: 0.7rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dress-garment-picker__chevron {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 0.7rem;
}

.dress-garment-picker__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 8px;
    box-shadow: var(--shadow-soft);
}

.dress-garment-picker__option {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 4px 6px;
    cursor: pointer;
}

.dress-garment-picker__option:hover {
    border-color: var(--success, #1f8f5f);
    background: var(--success-soft);
}

.dress-override-add-prenda-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.dress-override-prenda-block {
    margin-bottom: 6px;
}

/* Cabecera y filas comparten exactamente el mismo grid, para que "Vestuario
   / Colores / Cantidad" midan lo mismo que sus columnas de verdad. */
.dress-override-prenda-block__row,
.dress-override-prenda-block__row--header {
    display: grid;
    grid-template-columns: 1fr 1fr 140px 32px;
    align-items: center;
    gap: 8px;
}

.dress-override-prenda-block__row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 6px 8px;
}

.dress-override-prenda-block__row--header {
    padding: 0 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    margin-bottom: 4px;
}

.dress-override-prenda-block__qty {
    width: 100%;
}

.dress-override-prenda-block__colors {
    min-width: 0;
    overflow-x: auto;
}

.dress-override-prenda-block__qty-group {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dress-override-unlimited-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.dress-override-prenda-block__row [data-dress-override-remove-block] {
    flex: 0 0 auto;
}

.dress-exception-group {
    margin-bottom: 18px;
}

.dress-exception-group__header {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.dress-exception-group__header [data-dress-override-edit-user] {
    margin-left: auto;
}

.dress-exception-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}

.dress-exception-card__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

.dress-exception-card__garment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.dress-exception-card__thumb {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--surface);
}

.dress-exception-card__thumb--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.dress-exception-card__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dress-exception-card__swatch-wrap {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.dress-exception-card__swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.dress-garment-card__swatch-btn {
    all: unset;
    position: relative;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    cursor: pointer;
}

.dress-garment-card__swatch-btn:hover {
    border-color: var(--success, #1f8f5f);
    box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.25);
}

/* Marca cuál es el color que se ve ahora mismo en la foto de arriba. */
.dress-garment-card__swatch-btn.is-active {
    border: 2px solid var(--success, #1f8f5f);
    box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.35);
}

.dress-exception-card__swatch-cross {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger, #c0392b);
    font-size: 0.85rem;
    font-weight: 900;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
    pointer-events: none;
}

.dress-exception-card__all-garments {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dress-collection-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

.dress-collection-icon-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.72rem;
    cursor: pointer;
}

.dress-collection-icon-btn:hover {
    background: var(--surface-hover);
}

.dress-collection-icon-btn--danger {
    border-color: rgba(192, 57, 43, 0.35);
    background: rgba(192, 57, 43, 0.08);
}

.dress-collection-icon-btn--danger:hover {
    background: rgba(192, 57, 43, 0.16);
}

.dress-collection-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.dress-collection-text-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.dress-collection-text-btn:hover {
    background: var(--surface-hover);
}

.dress-collection-text-btn--danger {
    border-color: rgba(192, 57, 43, 0.35);
    background: rgba(192, 57, 43, 0.08);
    color: var(--danger, #c0392b);
}

.dress-collection-text-btn--danger:hover {
    background: rgba(192, 57, 43, 0.16);
}

.dress-override-user-search {
    position: relative;
}

.dress-override-user-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.dress-override-user-result {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.dress-override-user-result:hover {
    background: var(--surface-hover);
}

.dress-batch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.dress-batch-row__main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    cursor: pointer;
}

.dress-batch-row:hover {
    background: var(--surface-soft);
}

.dress-batch-table,
.dress-request-item-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.dress-request-item-table th,
.dress-request-item-table td {
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
}

.labor-signature-modal {
    font-size: 0.82rem;
}

.dress-summary-extra-input {
    width: 80px;
    min-height: 30px;
    padding: 3px 6px;
    box-sizing: border-box;
    font-size: 0.78rem;
}

.dress-delivery-item-table th,
.dress-delivery-item-table td {
    padding: 5px 6px;
}

.dress-delivery-item-table th {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    vertical-align: bottom;
    white-space: nowrap;
}

.dress-delivery-item-table .dress-request-item__name-cell {
    gap: 6px;
}

.dress-delivery-item-table .dress-exception-card__thumb {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.dress-delivery-item-table th:nth-child(5),
.dress-delivery-item-table th:nth-child(6),
.dress-delivery-item-table td:nth-child(5),
.dress-delivery-item-table td:nth-child(6) {
    width: 80px;
}

.dress-delivery-item-table input,
.dress-delivery-item-table .labor-badge {
    font-size: 0.78rem;
    min-height: 30px;
    box-sizing: border-box;
}

.dress-delivery-item-table input[type="number"] {
    width: 70px;
    padding: 3px 6px;
}

.dress-delivery-item-table input[type="text"] {
    width: 100px;
    padding: 3px 6px;
}

.labor-signature-pad__worker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.labor-signature-pad__worker img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.dress-delivery-balance__final {
    background: var(--warning-soft);
    color: var(--text);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius);
}

.dress-delivery-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.dress-request-item__name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dress-request-item__requested-at {
    display: block;
    font-size: 0.72rem;
    color: var(--text-soft);
    font-weight: 400;
}

.dress-batch-table th,
.dress-batch-table td {
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    text-align: left;
}

.dress-batch-table__received {
    width: 80px;
}

/* ---- Vestuario de temporada (self-service) ---- */

.dress-wardrobe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.dress-wardrobe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface);
}

.dress-wardrobe-card__collection-tag {
    position: absolute;
    top: -9px;
    left: 12px;
    background: var(--surface);
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary, #2952e3);
}

.dress-wardrobe-card--locked {
    background: var(--surface-soft);
    opacity: 0.85;
}

.dress-wardrobe-card__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.dress-wardrobe-card__title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dress-wardrobe-card__preview {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dress-wardrobe-card__preview img {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
}

.dress-wardrobe-card__preview-fallback {
    font-size: 2.5rem;
}

/* Tarjetas de "ya pedido/entregado/bloqueado": foto pequeña a la izquierda
   y el texto (nombre, estado, talla y cantidad) a la derecha, en vez de
   apilado debajo. */
.dress-wardrobe-card__locked-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dress-wardrobe-card__locked-row .dress-wardrobe-card__preview {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.dress-wardrobe-card__locked-row .dress-wardrobe-card__preview-fallback {
    font-size: 1.6rem;
}

.dress-wardrobe-card__locked-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dress-wardrobe-card__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dress-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
}

.dress-color-swatch.is-selected {
    border-color: var(--primary, #2f6fed);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.dress-wardrobe-card__sizes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.dress-wardrobe-card__size-btn {
    all: unset;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.dress-wardrobe-card__size-btn:hover {
    border-color: var(--success, #1f8f5f);
}

.dress-wardrobe-card__size-btn.is-selected {
    background: var(--success, #1f8f5f);
    border-color: var(--success, #1f8f5f);
    color: #fff;
}

.dress-wardrobe-card__quantities {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.dress-wardrobe-card__qty-btn {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 5px 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.dress-wardrobe-card__qty-btn:hover {
    border-color: var(--success, #1f8f5f);
}

.dress-wardrobe-card__qty-btn.is-selected {
    background: var(--success, #1f8f5f);
    border-color: var(--success, #1f8f5f);
    color: #fff;
}

.dress-wardrobe-card__clear-btn {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 6px 4px;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-radius: var(--radius);
    background: rgba(192, 57, 43, 0.08);
    color: var(--danger, #c0392b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.dress-wardrobe-card__clear-btn:hover {
    background: rgba(192, 57, 43, 0.16);
}

.dress-wardrobe-card__send-btn {
    width: 100%;
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.72rem;
}

/* Aviso de que esta prenda ya tiene un pedido sin aceptar todavía: se puede
   seguir cambiando talla/cantidad y reenviar actualiza ese mismo pedido. */
.dress-wardrobe-card__existing-badge {
    min-height: 0;
    padding: 1px 7px;
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dress-wardrobe-card__pending-info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 7px 9px;
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    border-radius: 3px;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text);
}

.dress-wardrobe-card__pending-info::before {
    content: "ℹ️";
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1.2;
}

.dress-wardrobe-not-requested-warning {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-radius: var(--radius);
    background: rgba(192, 57, 43, 0.08);
    color: var(--danger, #c0392b);
    font-size: 0.85rem;
    font-weight: 600;
}

.dress-wardrobe-card__picker {
    display: flex;
    gap: 6px;
}

.dress-wardrobe-card__lines {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dress-wardrobe-card__lines li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--surface-soft);
    border-radius: var(--radius);
    padding: 3px 8px;
}

.dress-wardrobe-card__lines button {
    border: none;
    background: none;
    color: var(--danger, #dc2626);
    cursor: pointer;
    font-weight: 700;
}

/* "Mis pedidos": una fila por colección, con la firma de entrega en
   miniatura cuando el pedido ya está entregado. */
.dress-my-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 8px 10px;
    margin-bottom: 6px;
}

.dress-my-request-row__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dress-my-request-row__main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dress-my-request-row__items {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.dress-my-request-row__signature {
    width: 60px;
    height: 36px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* .labor-field pone display:grid con la misma especificidad que el
   atributo hidden, así que gana él y el selector se ve aunque esté
   "hidden": aquí se fuerza a que el atributo mande de verdad. */
.labor-field[hidden] {
    display: none;
}

/* ---- Dashboard de "Logística" para el trabajador (pensado para móvil):
   banner del vehículo a todo lo ancho arriba, y debajo una rejilla de
   accesos cuadrados de 3 en 3. ---- */
.logistics-self-vehicle-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 12px;
    margin: 0 auto 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.logistics-self-vehicle-banner__photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-soft);
}

.logistics-self-vehicle-banner__photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logistics-self-vehicle-banner__photo-fallback {
    font-size: 2rem;
}

.logistics-self-vehicle-banner__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logistics-self-vehicle-banner__plate {
    font-size: 1.05rem;
    font-weight: 700;
}

.logistics-self-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}

.logistics-self-tile {
    all: unset;
    box-sizing: border-box;
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: var(--radius);
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.logistics-self-tile:disabled {
    cursor: default;
    opacity: 0.45;
}

.logistics-self-tile__icon {
    font-size: 2.7rem;
    line-height: 1;
}

/* En la rejilla del dashboard el icono va encima del texto (columna), no
   al lado: el margen lateral del .app-icon (pensado para icono + texto en
   línea) sobra aquí y lo descentraría. */
.logistics-self-tile .app-icon {
    margin-right: 0;
    /* Fondo de color sólido en todos los tipos de tarjeta: el icono se
       pinta de blanco, si no queda negro sobre el color y no se ve. */
    filter: brightness(0) invert(1);
}

.logistics-self-tile__label {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Colores algo más oscuros que el primer intento: con texto blanco encima,
   #d97706/#ea580c/#0891b2/#94a3b8 originales quedaban por debajo de 3:1 de
   contraste (letra pequeña y en negrita, pero aun así apurado). */
.logistics-self-tile--fuel { background: #b45309; }
.logistics-self-tile--itv { background: var(--primary-dark); }
.logistics-self-tile--insurance { background: #7c3aed; }
.logistics-self-tile--tools { background: #475569; }
.logistics-self-tile--epis { background: #c2410c; }
.logistics-self-tile--dress { background: #1f8f5f; }
.logistics-self-tile--courses { background: #0e7490; }
.logistics-self-tile--material { background: #0f766e; }
.logistics-self-tile--empty { background: #64748b; }

.logistics-self-tile__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: var(--radius);
    background: #facc15;
    color: #111827;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.4;
}

.logistics-self-tile__badge--danger {
    background: #dc2626;
    color: #fff;
}

.logistics-self-tile__badge--blink {
    animation: logistics-self-tile-badge-blink 1s steps(1, end) infinite;
}

@keyframes logistics-self-tile-badge-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.25; }
}

.logistics-self-back {
    margin-bottom: 12px;
}

.logistics-self-vehicle-warning {
    display: block;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    margin: 0 auto 12px;
    text-align: center;
    font-weight: 700;
}

.logistics-self-vehicle-search {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 16px;
}

.logistics-self-vehicle-search__results {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow, 0 8px 20px rgba(15, 23, 42, 0.12));
    padding: 4px;
}

.logistics-self-vehicle-search__item {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
}

.logistics-self-vehicle-search__item:hover {
    background: var(--surface-hover);
}

.logistics-self-vehicle-search__item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--radius);
    flex-shrink: 0;
}

/* Los paneles de cada cuadrado (Vestuario, ITV...) centrados con el mismo
   ancho que la rejilla de cuadrados del dashboard, en vez de ocupar todo
   el ancho del panel. */
[data-logistics-self-dress-panel],
[data-logistics-self-itv-panel],
[data-logistics-self-insurance-panel],
[data-logistics-self-material-panel],
[data-logistics-self-courses-panel],
[data-logistics-self-epi-panel],
[data-logistics-self-tools-panel] {
    max-width: 480px;
    margin: 0 auto;
}

.logistics-self-panel-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    /* El padding del panel de arriba (.labor-panel__body) ya deja bastante
       aire encima: se recorta con un margen negativo para no duplicarlo. */
    margin: -12px 0 12px;
    border-radius: var(--radius);
}

.logistics-self-panel-header--dress { background: #1f8f5f; }
.logistics-self-panel-header--itv { background: var(--primary-dark); }
.logistics-self-panel-header--insurance { background: #7c3aed; }
.logistics-self-panel-header--material { background: #0f766e; }
.logistics-self-panel-header--courses { background: #0e7490; }

.logistics-self-panel-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logistics-self-panel-header .logistics-self-back {
    margin-bottom: 0;
}

.logistics-self-panel-header__title {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Aquí los toggles van dentro del flujo normal (a la derecha por el
   space-between del header), no flotando en absoluto como en el resto de
   la app; y en un tono que contraste con el color del header. */
.logistics-self-panel-header .dress-request-toggles {
    position: static;
    margin-bottom: 0;
}

.logistics-self-panel-header .dress-request-toggles__btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.logistics-self-panel-header .dress-request-toggles__btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.logistics-self-panel-header--dress .dress-request-toggles__btn.is-active {
    background: var(--surface);
    border-color: #fff;
    color: #1f8f5f;
}

/* El panel de Vestuario, al menos tan alto como la rejilla de los 9
   cuadrados del dashboard. */
[data-logistics-self-dress-panel] .labor-card-section__body {
    min-height: 480px;
    box-sizing: border-box;
}

/* ---- Tarjeta de Seguro (self-service): más cuidada que un simple bloque
   de texto, con degradado en la cabecera y estados de color según si está
   al día, próximo a vencer o caducado. Radio de esquina 3px, como el resto
   de la app: lo "moderno" viene del espaciado, la tipografía y el color,
   no de esquinas redondeadas. ---- */
.vehicle-status-card {
    width: 100%;
    min-height: 480px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--border);
}

.vehicle-status-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fichaje-request) 20%, var(--surface)), color-mix(in srgb, var(--fichaje-request) 10%, var(--surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--fichaje-request) 25%, transparent);
}

.vehicle-status-card__photo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--fichaje-request) 30%, transparent);
    font-size: 1.4rem;
}

.vehicle-status-card__photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vehicle-status-card__plate-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.vehicle-status-card__plate {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--fichaje-request-dark);
    letter-spacing: 0.02em;
}

.vehicle-status-card__plate-sub {
    font-size: 0.75rem;
    color: var(--fichaje-request);
    opacity: 0.8;
}

/* Por defecto (Seguro) es morado; ITV usa azul en vez de morado mientras
   no haya un estado (caducado/próximo) que lo pise. */
.vehicle-status-card--itv .vehicle-status-card__top {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), color-mix(in srgb, var(--primary) 10%, var(--surface)));
    border-bottom-color: color-mix(in srgb, var(--primary) 15%, transparent);
}

.vehicle-status-card--itv .vehicle-status-card__photo {
    border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.vehicle-status-card--itv .vehicle-status-card__plate,
.vehicle-status-card--itv .vehicle-status-card__hero-label {
    color: var(--primary-dark);
}

.vehicle-status-card--itv .vehicle-status-card__plate-sub {
    color: var(--primary);
}

.vehicle-status-card--itv .vehicle-status-card__hero-label {
    background: color-mix(in srgb, var(--primary) 20%, var(--surface));
}

.vehicle-status-card--itv .vehicle-status-card__call {
    background: var(--brand-fill-gradient);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent);
}

.vehicle-status-card__status-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.vehicle-status-card__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px 18px;
    text-align: center;
}

.vehicle-status-card__hero-label {
    display: inline-flex;
    padding: 3px 12px;
    border-radius: var(--radius);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--fichaje-request) 20%, var(--surface));
    color: var(--fichaje-request-dark);
}

.vehicle-status-card__hero-date {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
}

.vehicle-status-card__hero-days {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.vehicle-status-card__expired-flag {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 20px;
    border-radius: var(--radius);
    background: #dc2626;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.vehicle-status-card__details {
    display: flex;
    flex-direction: column;
    margin: 0 16px;
    border-top: 1px dashed var(--border);
}

.vehicle-status-card__detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.85rem;
}

.vehicle-status-card__detail-row:last-child {
    border-bottom: none;
}

.vehicle-status-card__detail-label {
    color: var(--text-soft);
}

.vehicle-status-card__detail-value {
    font-weight: 700;
    text-align: right;
}

.vehicle-status-card__call {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px;
    padding: 12px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.35);
}

.vehicle-status-card__call-icon {
    font-size: 1.1rem;
}

.vehicle-status-card__empty {
    padding: 24px 16px;
    text-align: center;
}

/* Estados: caducado en rojo, próximo a vencer en ámbar, el resto se queda
   con el morado del seguro. */
.vehicle-status-card--expired .vehicle-status-card__top {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 20%, var(--surface)), color-mix(in srgb, var(--danger) 10%, var(--surface)));
    border-bottom-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.vehicle-status-card--expired .vehicle-status-card__hero-label {
    background: color-mix(in srgb, var(--danger) 20%, var(--surface));
    color: var(--danger-dark);
}

.vehicle-status-card--expired .vehicle-status-card__hero-date {
    color: var(--danger-dark);
}

/* Sin ningún registro es al menos tan grave como caducado (no se sabe si
   el vehículo tiene ITV/seguro en vigor) -- mismo tratamiento visual que
   "expired", pedido explícito de que avise en vez de quedarse neutro. */
.vehicle-status-card--unknown .vehicle-status-card__top {
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 20%, var(--surface)), color-mix(in srgb, var(--danger) 10%, var(--surface)));
    border-bottom-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.vehicle-status-card--unknown .vehicle-status-card__hero-label {
    background: color-mix(in srgb, var(--danger) 20%, var(--surface));
    color: var(--danger-dark);
}

.vehicle-status-card--unknown .vehicle-status-card__hero-date {
    color: var(--danger-dark);
}

.vehicle-status-card--upcoming .vehicle-status-card__top {
    background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 20%, var(--surface)), color-mix(in srgb, var(--warning) 10%, var(--surface)));
    border-bottom-color: color-mix(in srgb, var(--warning) 20%, transparent);
}

.vehicle-status-card--upcoming .vehicle-status-card__hero-label {
    background: color-mix(in srgb, var(--warning) 20%, var(--surface));
    color: var(--warning);
}

.vehicle-status-card--upcoming .vehicle-status-card__hero-date {
    color: var(--warning);
}

/* Este aviso concreto lleva texto largo: en vez de desbordar el ancho en
   móvil (como el resto de .labor-badge, pensados para texto corto en una
   sola línea), aquí se deja que baje a varias líneas. */
p.labor-badge.dress-wardrobe-status-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.35;
    padding: 7px 12px;
    margin: 0 0 12px;
    font-weight: 600;
}

.dress-wardrobe-status-banner__icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.dress-wardrobe-status-banner__sub {
    font-weight: 400;
    opacity: 0.85;
}

/* ---- Proveedores: lista ordenada por tipo, en vez de cuadros. ---- */
.logistics-provider-group {
    margin-bottom: 18px;
}

.logistics-provider-group__title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.logistics-provider-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.logistics-provider-row {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.88rem;
}

.logistics-provider-list .logistics-provider-row:last-child {
    border-bottom: none;
}

.logistics-provider-row:hover {
    background: var(--surface-hover);
}

.logistics-provider-row--inactive {
    opacity: 0.6;
}

.logistics-provider-row__name {
    flex: 1;
    font-weight: 600;
}

.logistics-provider-row__delete {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--radius);
}

.logistics-provider-row__delete:hover {
    background: rgba(192, 57, 43, 0.12);
}

.logistics-provider-add {
    margin-top: 4px;
}

/* ---- Modal de colección: más ancho y en columnas, para que quepa sin
   scroll vertical (Nombre/Temporada/Año en la misma fila, switch de
   permanente aparte, fechas en su fila, notas al final). ---- */
.dress-collection-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
    align-items: end;
    margin-bottom: 14px;
}

.dress-collection-modal-grid .labor-field {
    margin: 0;
}

.dress-collection-modal-notes {
    margin-top: 14px;
}

@media (max-width: 640px) {
    .dress-collection-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* Switch tipo interruptor, reutilizable: se usa aquí para "Colección
   permanente" en vez del checkbox de toda la vida. */
.labor-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.labor-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.labor-switch__track {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 20px;
    border-radius: 3px;
    background: var(--border-strong);
    transition: background 0.2s ease;
}

.labor-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 0.2s ease;
}

.labor-switch input:checked + .labor-switch__track {
    background: var(--success, #1f8f5f);
}

.labor-switch input:checked + .labor-switch__track .labor-switch__thumb {
    transform: translateX(14px);
}

.labor-switch input:focus-visible + .labor-switch__track {
    outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
    outline-offset: 2px;
}

.labor-switch__label {
    font-weight: 600;
    font-size: 0.86rem;
}

.labor-switch--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.labor-switch--disabled .labor-switch__label {
    font-weight: 500;
    font-style: italic;
}

/* ---- Tarjetas de colección: rediseño con acento de color según estado
   (borrador/activa/finalizada) o permanente. ---- */
.dress-collection-card2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.dress-collection-card2--draft { border-left-color: #94a3b8; }
.dress-collection-card2--active { border-left-color: var(--success, #1f8f5f); }
.dress-collection-card2--finalized { border-left-color: var(--danger, #c0392b); }
.dress-collection-card2--permanent { border-left-color: #7c3aed; }

.dress-collection-card2__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dress-collection-card2__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.dress-collection-card2__title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dress-collection-card2__title-block strong {
    font-size: 0.95rem;
}

.dress-collection-card2__meta {
    font-size: 0.78rem;
    color: var(--text-soft);
}

.dress-collection-card2__dates {
    font-size: 0.8rem;
    color: var(--text-soft);
    background: var(--surface-soft);
    border-radius: var(--radius);
    padding: 6px 10px;
    width: fit-content;
}

.dress-collection-card2 .dress-collection-actions {
    margin-top: auto;
}


/* Pedir material (zona del trabajador, pensada para móvil) */
.mat-self { display: grid; gap: 10px; }
.mat-self .wh-card { padding: 10px; display: grid; gap: 8px; }
.mat-self h3 { margin: 0; font-size: 1rem; }
.mat-self h4 { margin: 4px 0 0; font-size: .9rem; }
.mat-self .input { min-height: 44px; font-size: 16px; }
.mat-self .button { min-height: 44px; }
.mat-self .wh-mat-results { max-height: 46vh; margin: 0; }
.mat-self .wh-mat-item { padding: 8px; min-height: 52px; }
.mat-self .wh-mat-row { grid-template-columns: auto 1fr 76px 40px; padding: 6px; }
.mat-self .wh-req { padding: 8px 0; border-top: 1px solid var(--border); gap: 6px; }
.mat-self .wh-req__actions .button { width: 100%; }
.mat-self .wh-table-wrap { overflow-x: auto; }
.mat-self .wh-table { font-size: .8rem; }
.mat-self [data-send] { width: 100%; }
.mat-self { grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
.mat-self .wh-card { min-width: 0; box-sizing: border-box; }
.mat-self .wh-table-wrap { max-width: 100%; overflow-x: auto; }
/* El track 1fr del grid del trabajador crecía con el contenido (pedir material) y sacaba el panel de la pantalla. */
.labor-grid.labor-grid--self { grid-template-columns: minmax(0, 1fr); }
.labor-panel--self-main, .labor-panel--self-main .labor-panel__body { min-width: 0; }
[data-logistics-self-material-panel] .wh-mat-item { min-width: 0; overflow: hidden; }
[data-logistics-self-material-panel] .wh-mat-item span { overflow: hidden; }
[data-logistics-self-material-panel] .wh-sub { overflow-wrap: anywhere; }

/* GPS: mapa de la flota (Leaflet necesita una altura explícita en el contenedor). */
.gps-live { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.gps-live__sidebar { display: flex; flex-direction: column; gap: 10px; max-height: 600px; overflow-y: auto; }
.gps-live__map { min-width: 0; }
.gps-map { width: 100%; height: 600px; border-radius: var(--radius); overflow: hidden; }

.gps-vehicle-card {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.gps-vehicle-card:hover { border-color: var(--border-strong); }
.gps-vehicle-card.is-selected { border-color: #16a34a; background: color-mix(in srgb, #16a34a 14%, var(--surface)); }
.gps-vehicle-card__check { width: 16px; height: 16px; flex-shrink: 0; accent-color: #16a34a; cursor: pointer; }
.gps-vehicle-card__avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--surface-soft); display: flex; align-items: center;
    justify-content: center; font-size: 1.1rem; flex-shrink: 0; overflow: hidden;
}
.gps-vehicle-card__avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.gps-vehicle-card__body { min-width: 0; }
.gps-vehicle-card__plate { font-weight: 700; font-size: .9rem; }
.gps-vehicle-card__driver { font-size: .68rem; color: #16a34a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gps-vehicle-card__status { font-size: .78rem; color: var(--text-soft); display: flex; align-items: center; gap: 4px; }
.gps-vehicle-card__status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gps-vehicle-card__status-dot--moving { background: #16a34a; }
.gps-vehicle-card__status-dot--stopped { background: #f59e0b; }
.gps-vehicle-card__status-dot--offline { background: #94a3b8; }

.gps-select-all {
    width: 100%; margin-bottom: 8px; padding: 7px 10px; border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, #16a34a 35%, transparent); background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: #16a34a; font-size: .78rem;
    font-weight: 600; cursor: pointer; transition: background .15s;
}
.gps-select-all:hover { background: color-mix(in srgb, #16a34a 22%, var(--surface)); }

.gps-vehicle-item { margin-bottom: 8px; }
.gps-vehicle-card__chevron {
    /* Zona clicable amplia (no solo el icono de la flecha), fácil de acertar sin marcar/
       desmarcar el vehículo sin querer, con un borde para que se note que es una zona
       aparte del resto de la tarjeta. */
    margin: -10px -12px -10px 0; margin-left: auto; flex-shrink: 0; width: 44px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0 var(--radius) var(--radius) 0; border: none; border-left: 1px solid var(--border);
    background: transparent; color: var(--text-soft); font-size: 1.05rem; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
}
.gps-vehicle-card__chevron:hover { background: var(--surface-hover); }
.gps-vehicle-card__chevron.is-open { background: var(--surface-hover); }
.gps-vehicle-card__chevron-badge {
    width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor;
    display: flex; align-items: center; justify-content: center; font-size: .72rem;
    font-style: italic; font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
    opacity: .55; transition: opacity .15s, color .15s;
}
.gps-vehicle-card__chevron:hover .gps-vehicle-card__chevron-badge,
.gps-vehicle-card__chevron.is-open .gps-vehicle-card__chevron-badge { opacity: 1; color: var(--primary); }
.gps-vehicle-card__collapse { margin-top: 6px; }

/* Tarjeta de detalle del vehiculo (la que se despliega con la "i"). Antes era un
   cuadrado azul marino fijo (#101f3d) igual en todos los skins y modos, con
   textos blancos/beige fijos. Ahora todo sale de las variables del tema: un
   tinte suave del color de marca sobre la superficie, texto principal y
   secundario del tema (contraste >= 6:1 en claro y oscuro), asi cambia con
   Choco/Green/Sky y con el modo. */
.gps-detail {
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 9%, var(--surface-elevated)), var(--surface-soft));
    color: var(--text); border-radius: 4px; padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--edge-highlight, transparent);
    font-size: .78rem;
}
.gps-detail__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gps-detail__avatar {
    width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); display: flex; align-items: center;
    justify-content: center; font-size: .95rem; flex-shrink: 0;
}
.gps-detail__title { font-weight: 700; font-size: .85rem; line-height: 1.2; }
.gps-detail__subtitle { font-size: .68rem; color: var(--text-soft); line-height: 1.3; }
.gps-detail__odometer { margin-left: auto; text-align: right; font-size: .65rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .02em; }
.gps-detail__odometer strong { display: block; font-size: .85rem; color: var(--text); text-transform: none; letter-spacing: normal; }
.gps-detail__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.gps-detail__batteries { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
.gps-detail__stat {
    font-size: .6rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .02em;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 4px; padding: 5px 7px;
}
.gps-detail__stat strong { display: block; font-size: .8rem; color: var(--text); text-transform: none; letter-spacing: normal; margin-top: 1px; }
.gps-detail__fuel-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.gps-detail__fuel-bar span { display: block; height: 100%; background: var(--danger); }
.gps-detail__driver {
    margin-top: 8px; padding: 6px 8px; border-radius: 3px; background: var(--success-soft);
    border: 1px solid var(--success-soft-strong);
    font-size: .72rem; color: var(--success-soft-ink); display: flex; align-items: center; gap: 8px;
}
.gps-detail__driver strong { color: var(--text); }
.gps-detail__driver .gps-driver-avatar { border-color: var(--border); background: var(--surface-soft); }
.gps-direction-arrow {
    display: inline-block; font-weight: 700; color: var(--primary); font-size: 1rem;
    transform-origin: center;
}
.gps-ignition-switch {
    position: relative; display: inline-block; width: 32px; height: 16px; border-radius: 3px;
    vertical-align: middle; transition: background .15s;
}
.gps-ignition-switch.is-off { background: #dc2626; }
.gps-ignition-switch.is-on { background: #16a34a; }
.gps-ignition-switch__knob {
    position: absolute; top: 2px; width: 12px; height: 12px; border-radius: 2px; background: var(--surface-elevated);
    transition: left .15s;
}
.gps-ignition-switch.is-off .gps-ignition-switch__knob { left: 2px; }
.gps-ignition-switch.is-on .gps-ignition-switch__knob { left: 18px; }
.gps-satellites-badge {
    display: inline-block; padding: 1px 7px; border-radius: 3px; font-weight: 700; font-size: .82rem;
}
.gps-satellites-badge--bad { background: var(--danger-soft-tint); color: var(--danger-soft-ink); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.gps-satellites-badge--mid { background: var(--warning-soft); color: var(--warning-soft-ink); border: 1px solid var(--warning-border); }
.gps-satellites-badge--good { background: var(--success-soft); color: var(--success-soft-ink); border: 1px solid var(--success-soft-strong); }
.gps-detail__footer { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); font-size: .68rem; color: var(--text-soft); }

/* GPS: sub-pestañas (En vivo / Trayectos) y listado de trayectos */
.gps-subtabs { margin-right: 8px; }
.gps-trips-sidebar { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.gps-trips-filters {
    display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 6%, transparent);
}
.gps-trips-filters .labor-field span { font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .02em; }
.gps-trips-filters .input { font-size: .82rem; }
.gps-trips-filters__dates { display: flex; gap: 8px; }
.gps-trips-filters__dates .labor-field { flex: 1; min-width: 0; }
.gps-trips-filters__dates .input { font-size: .76rem; padding: 6px 8px; }

.gps-trip-day { margin-bottom: 10px; }
.gps-trip-day__header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .78rem; font-weight: 700; color: var(--text); text-transform: capitalize;
    padding: 4px 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.gps-trip-day__count {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary-dark); font-size: .68rem; font-weight: 700;
    border-radius: 3px; padding: 1px 6px;
}
.gps-trip-day__trips { display: flex; flex-direction: column; gap: 6px; }
.gps-trip-card {
    padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; font-size: .78rem; transition: border-color .15s, background .15s;
}
.gps-trip-card:hover { border-color: var(--border-strong); }
.gps-trip-card.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.gps-trip-card__time { font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gps-trip-card__delete {
    border: 1px solid transparent; background: transparent; color: var(--text-soft); cursor: pointer;
    width: 20px; height: 20px; line-height: 1; font-size: 1rem; border-radius: 3px; padding: 0;
}
.gps-trip-card__delete:hover { color: var(--danger-dark); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.gps-trip-card__meta { color: var(--text-soft); font-size: .72rem; margin-top: 2px; }
.gps-trip-card__driver {
    display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .72rem;
    color: var(--text-soft);
}
.gps-trip-card__driver .gps-driver-avatar { width: 20px; height: 20px; font-size: .68rem; }

.gps-speeding-list { margin-top: 8px; padding: 10px; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--radius); }
.gps-speeding-list__title { font-weight: 700; color: var(--danger-dark); font-size: .82rem; margin: 0 0 6px; }
.gps-speeding-list__item { font-size: .78rem; color: var(--text); padding: 3px 0; }

.gps-popup { font-family: inherit; min-width: 190px; }
.gps-popup__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gps-popup__avatar {
    width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1rem;
    border: 2px solid var(--border);
}
.gps-popup__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gps-popup__title { font-weight: 700; font-size: .88rem; color: var(--text); line-height: 1.2; }
.gps-popup__subtitle { font-size: .72rem; color: var(--text-soft); margin-top: 1px; }
.gps-popup__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0 6px; }
.gps-popup__grid div {
    display: flex; flex-direction: column; background: var(--surface-soft); border-radius: 3px; padding: 5px 7px;
}
.gps-popup__grid span { font-size: .62rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .02em; }
.gps-popup__grid strong { font-size: .82rem; color: var(--text); }
.gps-popup__driver {
    margin: 6px 0; padding: 5px 8px; border-radius: 3px; background: var(--success-soft);
    font-size: .72rem; color: var(--success-soft-ink); display: flex; align-items: center; gap: 8px;
}
.gps-popup__driver small { color: var(--success-soft-ink); }
.gps-driver-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--surface-elevated);
    border: 1px solid rgba(0,0,0,.08); font-size: .9rem;
}
.gps-driver-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gps-popup__footer { font-size: .68rem; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 5px; }

/* Chincheta con foto: forma de "gota" clásica de marcador de mapa (círculo + pico abajo)
   lograda rotando un cuadrado con esquinas redondeadas; la foto de dentro se rota al revés
   para que no salga girada. */
.gps-pin-icon { background: transparent; border: none; }
.gps-pin-wrap { position: relative; width: 34px; height: 44px; }
/* Aguja de rumbo: gira alrededor del centro del círculo (como una brújula), independiente de
   la rotación de la gota/la foto -- por eso vive fuera de .gps-pin, en su propio elemento. */
.gps-pin-heading {
    position: absolute; top: -3px; left: 50%; margin-left: -6px;
    width: 0; height: 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 11px solid var(--primary);
    transform-origin: 50% 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.gps-pin {
    width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--primary);
    transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid #fff;
}
.gps-pin__photo {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden; transform: rotate(45deg);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}
.gps-pin__photo img { width: 100%; height: 100%; object-fit: cover; }

.gps-devices-actions { margin-bottom: 10px; }
.gps-device-cards { display: flex; flex-direction: column; gap: 8px; }
.gps-device-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.gps-device-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 8%, transparent); }
.gps-device-card.is-inactive { opacity: .6; }
.gps-device-card__icon {
    width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.gps-device-card__body { min-width: 0; flex: 1; }
.gps-device-card__title { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gps-device-card__label { font-weight: 400; font-size: .76rem; color: var(--text-soft); }
.gps-device-card__meta { font-size: .74rem; color: var(--text-soft); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gps-device-card__dot { opacity: .5; }
.gps-device-card__status { font-weight: 600; }
.gps-device-card__status--on { color: #16a34a; }
.gps-device-card__status--off { color: #94a3b8; }
.gps-device-card__actions { display: flex; gap: 6px; flex-shrink: 0; }
.gps-device-card__actions .hold-confirm-button__label { font-size: .72rem; line-height: 1.2; }

.gps-live-map-wrap { position: relative; }
.gps-follow-toggle {
    position: absolute; top: 10px; right: 10px; z-index: 1000; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-soft); border-radius: 3px; padding: 6px 10px; font-size: .78rem;
    font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.gps-follow-toggle.is-active { background: var(--primary); color: var(--button-primary-ink, #fff); border-color: var(--primary); }
.gps-follow-toggle:disabled { opacity: .5; cursor: not-allowed; background: var(--surface); color: #94a3b8; border-color: var(--border); }

.gps-satellite-toggle {
    position: absolute; top: 46px; right: 10px; z-index: 1000; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-soft); border-radius: 3px; padding: 6px 10px; font-size: .78rem;
    font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.gps-satellite-toggle.is-active { background: var(--primary); color: var(--button-primary-ink, #fff); border-color: var(--primary); }

.gps-trips-map-wrap { position: relative; }
.gps-map-fullscreen {
    position: absolute; top: 10px; right: 10px; z-index: 1000; width: 34px; height: 34px;
    border: 1px solid var(--border); background: var(--surface); border-radius: 3px; cursor: pointer;
    font-size: 1rem; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.gps-trips-map-wrap:fullscreen .gps-map,
.gps-trips-map-wrap:-webkit-full-screen .gps-map { height: 100vh; }

@media (max-width: 900px) {
    .gps-live { grid-template-columns: minmax(0, 1fr); }
    .gps-live__sidebar { max-height: none; }
    .gps-map { height: 380px; }
}

/* Al pulsar una línea del mapa (tramo de exceso de velocidad), el navegador le pone el
   contorno de foco por defecto: un rectángulo feo alrededor de todo el trazo. No aporta nada
   aquí (el propio color/grosor de la línea ya indica que está seleccionada). */
.gps-map path.leaflet-interactive:focus {
    outline: none;
}

/* Leaflet marca sus marcadores (icono de la furgoneta / chincheta con foto del conductor) como
   enfocables por teclado (keyboard: true por defecto), así que el navegador les pone su anillo
   de foco por defecto -- y como el marcador se recrea (setIcon) en cada sondeo del mapa (cada
   pocos segundos), ese anillo "parpadeaba" alrededor del icono aunque nadie lo hubiera tocado.
   No aporta nada aquí, el propio marcador ya es visualmente claro sin el anillo. */
.gps-map .leaflet-marker-icon:focus,
.gps-map .leaflet-interactive:focus {
    outline: none;
}

/* Sub-secciones de Vehículos: Flota | GPS */
.logistics-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.logistics-subnav__item.is-active { background: var(--brand-fill-gradient); border-color: transparent; color: #fff; }

/* Resultado de búsqueda de vehículo: matrícula/modelo y, debajo, el usuario asignado (a la derecha de la foto). */
.logistics-self-vehicle-search__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.logistics-self-vehicle-search__user { color: var(--text-soft); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }