/* ===========================================================================
   alier-components.css — marketplace de integraciones, fichas y formularios
   Misma regla que el resto de la capa: ningún color literal.
   =========================================================================== */

/* --- Zona con scroll propio dentro de una página de altura fija ----------- */
.al-scrollarea {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding-block-end: var(--al-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--al-space-6);
}

.al-section { display: flex; flex-direction: column; gap: var(--al-space-3); }
.al-section + .al-section { margin-block-start: var(--al-space-2); }
.al-toolbar--catalog {
    justify-content: space-between;
    align-items: center;
    gap: var(--al-space-3);
    padding-block: var(--al-space-1) var(--al-space-3);
}
.al-toolbar--catalog > .al-searchwrap { flex: 1 1 18rem; }
.al-section__title {
    display: flex;
    align-items: baseline;
    gap: var(--al-space-3);
    margin: 0;
    font-size: var(--al-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--al-text-muted);
    flex-wrap: wrap;
}
.al-section__hint { font-size: var(--al-text-xs); font-weight: 400; color: var(--al-text-subtle); }

/* --- Rejilla marketplace --------------------------------------------------
   Catálogo de integraciones: más tarjetas a la vista, ancho estable.
   auto-fill + techo en rem: no se estiran a ocupar el viewport. */
.al-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 16.75rem));
    justify-content: start;
    gap: var(--al-space-3);
    align-items: start;
}

.al-card {
    display: flex;
    flex-direction: column;
    gap: var(--al-space-3);
    padding: var(--al-space-3);
    background: var(--al-surface);
    border: 1px solid var(--al-border-hairline);
    border-radius: var(--al-radius-surface);
    min-block-size: 0;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.al-card:hover {
    border-color: var(--al-border);
    box-shadow: var(--al-shadow-1);
    background: var(--al-surface-raised);
}
.al-card.is-off {
    border-style: dashed;
    border-color: var(--al-border);
    background: var(--al-surface-sunken);
}
.al-card.is-off:hover {
    border-style: dashed;
    background: var(--al-surface-sunken);
    box-shadow: none;
}
.al-card.is-off .al-card__title { color: var(--al-text-muted); }

.al-card__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--al-space-3);
    min-inline-size: 0;
}

/* Slot 1:1. El SVG cubre el recuadro (slice/cover); no se deforma. */
.al-card__logo {
    box-sizing: border-box;
    flex: 0 0 auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    aspect-ratio: 1;
    display: grid;
    place-items: stretch;
    padding: 0;
    background: var(--al-surface-sunken);
    border: 1px solid var(--al-border-hairline);
    border-radius: var(--al-radius-control);
    overflow: hidden;
}
.al-card__logo .al-logo {
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: 100%;
    block-size: 100%;
    place-items: stretch;
}
.al-card__logo .al-logo--mono { place-items: center; }
.al-card__logo .al-logo svg {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Marca a color: ni grayscale, ni opacity, ni mix-blend (DEC-019). */
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
}

/* Inicio (lista y columna Transportista): mismas reglas de lienzo que
   la tarjeta. El tamaño 1:1 lo pone el scoped; aquí el SVG cubre. */
.al-hcourier__logo,
.al-home-carrier__logo {
    display: grid;
    place-items: stretch;
    overflow: hidden;
}
.al-hcourier__logo .al-logo,
.al-home-carrier__logo .al-logo {
    min-inline-size: 0;
    min-block-size: 0;
    place-items: stretch;
}
.al-hcourier__logo .al-logo--mono,
.al-home-carrier__logo .al-logo--mono { place-items: center; }
.al-hcourier__logo .al-logo svg,
.al-home-carrier__logo .al-logo svg {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.al-card__title {
    margin: 0;
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--al-text-md);
    font-weight: 600;
    line-height: var(--al-leading-tight);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.al-card__badge {
    align-self: flex-start;
    font-size: var(--al-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--al-text-subtle);
    border: 1px dashed var(--al-border);
    border-radius: var(--al-radius-pill);
    padding: 0.125rem var(--al-space-2);
}
.al-card__meta { font-size: var(--al-text-xs); color: var(--al-text-muted); }
.al-card__desc {
    margin: 0;
    font-size: var(--al-text-sm);
    line-height: var(--al-leading-normal);
    color: var(--al-text-muted);
}

.al-card__stats { display: flex; gap: var(--al-space-4); flex-wrap: wrap; }
.al-card__stat { display: flex; flex-direction: column; min-inline-size: 4.5rem; }
.al-card__stat b {
    font-size: var(--al-text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.al-card__stat span { font-size: var(--al-text-xs); color: var(--al-text-subtle); }
/* Una incidencia distinta de cero es lo único que merece color aquí. */
.al-card__stat.is-warn b { color: var(--al-warn); }

.al-card__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--al-space-1); }
.al-card__tags li {
    font-size: var(--al-text-xs);
    color: var(--al-text-muted);
    background: var(--al-surface-sunken);
    border: 1px solid var(--al-border-hairline);
    border-radius: var(--al-radius-pill);
    padding: 0.125rem var(--al-space-2);
}

.al-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--al-space-2);
    margin-block-start: 0;
    padding-block-start: 0;
    flex-wrap: nowrap;
    min-inline-size: 0;
}
/* Parece un enlace, pero es un botón y hay que poder acertarle: con relleno
   cero medía 20 px de alto, por debajo incluso del mínimo de 24 px de
   WCAG 2.5.8. Con relleno propio el objetivo pasa a 28 px. Sin margen
   negativo para recuperar el borde: desbordaba el pie de la tarjeta 8 px. */
.al-card__link {
    border: 0;
    background: transparent;
    margin-inline-start: auto;
    padding-block: var(--al-space-1);
    padding-inline: var(--al-space-2);
    min-block-size: 1.75rem;
    color: var(--al-accent);
    font-size: var(--al-text-sm);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.al-card__link:hover { text-decoration: underline; }
.al-card__link:focus-visible { box-shadow: var(--al-focus-ring); outline: none; border-radius: 2px; }

.al-btn--sm { min-block-size: 1.875rem; padding-inline: var(--al-space-3); font-size: var(--al-text-sm); }

/* --- Isotipo --------------------------------------------------------------
   A color: el SVG trae su fill de marca y se respeta. Solo el monocromo
   (sin hex, o ForceMono) hereda currentColor del tema. */
.al-logo {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    color: var(--al-text);
}
/* El SVG va sin atributos width/height (se los quita CourierLogo para que
   mande el CSS), así que hay que acotarlo AQUÍ de forma explícita: un SVG
   sin tamaño intrínseco se expande hasta llenar lo que le dejen. */
.al-logo svg {
    /* El SVG lleva viewBox y preserveAspectRatio="xMidYMid slice" (se los
       garantiza CourierLogo): cubre el recuadro, recorta el sobrante, no
       deforma. NADA de max-width/max-height en píxeles. */
    inline-size: 100%;
    block-size: 100%;
    display: block;
}
.al-logo__mono { font-size: var(--al-text-md); font-weight: 700; letter-spacing: 0.04em; }

/* Un logo corporativo a color suele estar pensado sobre blanco. En un tema
   oscuro se perdería, así que su caja lleva un fondo claro fijo.
   Es la única excepción a la regla de no usar colores literales, y está
   justificada: no es color de interfaz, es el lienzo del logo ajeno. */
.al-card__logo:has(.al-logo--color),
.al-detail__head .al-logo--color,
.al-hcourier__logo:has(.al-logo--color),
.al-home-carrier__logo:has(.al-logo--color) {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
}
/* Reserva para navegadores sin :has() */
.al-logo--color { --al-logo-canvas: #ffffff; }

.al-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    margin-inline-start: auto;
    flex: 0 0 auto;
}
.al-dot--ok { background: var(--al-ok); }

/* --- Interruptor ----------------------------------------------------------
   Sustituye al botón "Activar" del original, que no decía el estado actual:
   no se sabía si pulsarlo activaba o ya estaba activo. El cromo Alier dibuja
   el track; el Dx usa CheckType.Switch (API pública 25.2.9). */
.al-switch { display: inline-flex; align-items: center; gap: var(--al-space-2); cursor: pointer; }
.al-switch:not(.al-switch--dx) input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.al-switch__track {
    position: relative;
    inline-size: 2rem;
    block-size: 1.125rem;
    border-radius: var(--al-radius-pill);
    background: var(--al-surface-sunken);
    border: 1px solid var(--al-border);
    transition: background 140ms ease;
    flex: 0 0 auto;
}
.al-switch__track::after {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 1px;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: 50%;
    background: var(--al-text-subtle);
    transition: transform 140ms ease, background 140ms ease;
}
.al-switch:not(.al-switch--dx) input:checked + .al-switch__track { background: var(--al-accent-quiet); border-color: var(--al-accent); }
.al-switch:not(.al-switch--dx) input:checked + .al-switch__track::after { transform: translateX(0.875rem); background: var(--al-accent); }
.al-switch:not(.al-switch--dx) input:focus-visible + .al-switch__track { box-shadow: var(--al-focus-ring); }
.al-switch.is-on:not(.al-switch--dx) .al-switch__track { background: var(--al-accent-quiet); border-color: var(--al-accent); }
.al-switch.is-on:not(.al-switch--dx) .al-switch__track::after { transform: translateX(0.875rem); background: var(--al-accent); }
.al-switch { position: relative; }
.al-switch__label { font-size: var(--al-text-sm); color: var(--al-text-muted); }

/* Dx: CheckType.Switch + SizeMode.Medium. La geometría (track, knob,
   alineación) la pinta DevExpress. El apagado no trae borde: se añade
   un anillo inset de 1px en el track, sin mover el knob. */
.al-switch--dx {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
}
.al-switch--dx .al-switch__dx.dxbl-checkbox {
    --dxbl-checkbox-switch-checked-bg: var(--al-accent);
    --dxbl-checkbox-switch-checked-hover-bg: var(--al-accent);
    /* El track apagado de Dx no tiene borde (border-width: 0). Si el fondo
       es el mismo que la tarjeta .is-off, el contorno desaparece. El fondo
       vuelve a la superficie y el anillo inset usa un mix del texto: no mueve el knob. */
    --dxbl-checkbox-switch-unchecked-bg: var(--al-surface);
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--al-surface-raised);
    --dxbl-checkbox-switch-element-bg: var(--al-on-accent);
    --dxbl-checkbox-switch-element-unchecked-bg: var(--al-text-muted);
    font-size: var(--al-text-sm);
    color: var(--al-text-muted);
}
.al-switch--dx .al-switch__dx.dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-body-color) 55%, var(--al-surface));
}

/* --- Ficha de integración ------------------------------------------------- */
.al-detail { display: flex; flex-direction: column; gap: var(--al-space-5); }
.al-detail__head { display: flex; gap: var(--al-space-4); align-items: flex-start; }
.al-detail__head > .al-logo {
    box-sizing: border-box;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    place-items: stretch;
    background: var(--al-surface-sunken);
    border: 1px solid var(--al-border-hairline);
    border-radius: var(--al-radius-control);
}

.al-detail__name {
    margin: 0 0 var(--al-space-1);
    font-size: var(--al-text-lg);
    font-weight: 600;
    line-height: var(--al-leading-tight);
}
.al-detail__parity-hint {
    font-size: var(--al-text-sm);
    color: var(--al-text-muted);
}
.al-detail__proposal {
    display: flex;
    flex-direction: column;
    gap: var(--al-space-3);
    padding: var(--al-space-4);
    background: var(--al-surface-sunken);
    border: 1px dashed var(--al-border);
    border-radius: var(--al-radius-surface);
}
.al-detail__desc { margin: 0 0 var(--al-space-1); font-size: var(--al-text-md); line-height: var(--al-leading-normal); }
.al-detail__coverage { font-size: var(--al-text-sm); color: var(--al-text-muted); }
.al-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--al-space-5); }
.al-detail__h {
    margin: 0 0 var(--al-space-2);
    font-size: var(--al-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-text-subtle);
}
.al-detail__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--al-space-1); }
.al-detail__list li { font-size: var(--al-text-base); padding-inline-start: var(--al-space-4); position: relative; }
.al-detail__list li::before {
    content: "\2022";
    position: absolute;
    inset-inline-start: var(--al-space-1);
    color: var(--al-text-subtle);
}
.al-detail__list--check li::before { content: "\2713"; color: var(--al-ok); font-size: var(--al-text-xs); }
.al-detail__stats {
    display: flex;
    gap: var(--al-space-5);
    flex-wrap: wrap;
    padding-block-start: var(--al-space-4);
    border-block-start: 1px solid var(--al-border-hairline);
}

/* --- Casillas -------------------------------------------------------------- */
.al-check {
    display: inline-flex;
    align-items: center;
    gap: var(--al-space-2);
    cursor: pointer;
    font-size: var(--al-text-base);
}
.al-check input { inline-size: 1rem; block-size: 1rem; accent-color: var(--al-accent); flex: 0 0 auto; }
.al-checklist { display: flex; flex-direction: column; gap: var(--al-space-2); margin-block-end: var(--al-space-2); }
.al-field .al-pale-check { min-block-size: 2.25rem; }

/* Campo de código o credencial: monoespaciada, para revisarlo carácter
   a carácter sin confundir O con 0 ni l con 1. */
.al-input--code {
    font-family: var(--bs-font-monospace, ui-monospace, "SFMono-Regular", Menlo, monospace);
    letter-spacing: 0.02em;
}

/* --- Línea de tiempo (histórico de versiones) ----------------------------- */
.al-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.al-timeline__item { display: flex; gap: var(--al-space-3); padding-block: var(--al-space-3); position: relative; }
.al-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.3125rem;
    inset-block: 1.5rem -0.25rem;
    inline-size: 1px;
    background: var(--al-border);
}
.al-timeline__dot {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 50%;
    background: var(--al-accent);
    margin-block-start: 0.3rem;
    flex: 0 0 auto;
    z-index: 1;
}
.al-timeline__when { margin-inline-start: var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-text-subtle); }
.al-timeline__what { margin: 2px 0 0; font-size: var(--al-text-sm); color: var(--al-text-muted); }

/* ===========================================================================
   EXPANSOR (sustituye a <details>)
   ---------------------------------------------------------------------------
   Receta del proyecto: DxButton Text que alterna un bool + chevron Lucide
   (DEC-010). Misma geometría que el expansor de la tabla de bultos.
   Las marcas de propuesta EN PANTALLA se retiraron (DEC-031): lo extra
   vive en comentarios Razor y en handoff/PARA-EL-EQUIPO.md.
   =========================================================================== */
.al-disclose {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--al-space-1);
    min-inline-size: 0;
}
.al-disclose__btn.dxbl-btn {
    min-block-size: 1.75rem;
    padding-inline: 0;
    gap: var(--al-space-2);
    color: var(--al-text-muted);
}
.al-disclose .al-lines__chev {
    transition: transform 120ms ease;
    flex: 0 0 auto;
}
.al-disclose .al-lines__chev.is-open { transform: rotate(90deg); }

/* --- Filtros de DeCAs: ancho por tipo de dato ----------------------------- */
.al-filters__doc  { inline-size: 16rem; }
.al-filters__sel  { inline-size: 12rem; }
.al-filters__date { inline-size: 10rem; }
.al-filters__go   { margin-inline-start: auto; }

@media (max-width: 640px) {
    .al-filters__doc,
    .al-filters__sel,
    .al-filters__date { inline-size: 100%; }
    .al-filters__go { margin-inline-start: 0; inline-size: 100%; }
}

.al-actionbar__version { font-size: var(--al-text-sm); color: var(--al-text-muted); }

/* ===========================================================================
   INICIO — PIEZAS COMPARTIDAS POR LOS BLOQUES DE MÓDULO

   El cromo de la tarjeta vive en HomeCard.razor.css (scoped). Aquí solo lo
   que ESCRIBE cada bloque dentro del hueco de la tarjeta y, por tanto, lleva
   el scope del bloque y no el de la tarjeta: cifras del pie, estado vacío y
   listas de muestra. Sin colores literales (DEC-001).
   =========================================================================== */

.al-hcard__empty {
    display: flex;
    align-items: center;
    gap: var(--al-space-2);
    margin: 0;
    padding: var(--al-space-4);
    font-size: var(--al-text-sm);
    color: var(--al-text-muted);
}

.al-hcard__grid { flex: 1 1 auto; min-block-size: 0; }

.al-hcard__total {
    font-weight: 600;
    color: var(--al-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Reparto por estado en el pie de la lista de trabajo. No es un KPI nuevo:
   es la columna Estado del grid, contada. */
.al-hcard__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--al-space-1);
    text-decoration: none;
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.al-hcard__stat b { font-weight: 600; color: var(--al-text-muted); }
.al-hcard__stat:hover b { color: var(--al-text); }
.al-hcard__stat:focus-visible { box-shadow: var(--al-focus-ring); outline: none; }

.al-hcard__more {
    color: var(--al-text-muted);
    font-weight: 600;
    text-decoration: none;
}
.al-hcard__more:hover { color: var(--al-text); text-decoration: underline; }
.al-hcard__more:focus-visible { box-shadow: var(--al-focus-ring); outline: none; }

/* Lista de muestra de un mantenimiento: tres filas, dos datos por fila. */
.al-hlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--al-space-2);
}
.al-hlist__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--al-space-2);
    min-inline-size: 0;
    font-size: var(--al-text-sm);
}
/* El código no se parte: quien cede es la descripción, que es la que sobra
   si no cabe. Por eso el meta lleva base 0 y el principal no encoge. */
.al-hlist__main {
    flex: 0 0 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
}
.al-hlist__meta {
    flex: 1 1 0;
    min-inline-size: 0;
    text-align: end;
    font-size: var(--al-text-xs);
    color: var(--al-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Confirmación en la propia página (no un segundo overlay). Lo usa
   AlDirtyGuard y OrderDeca. Tokens, cero color literal. */
.al-confirmbar {
    padding: var(--al-space-4);
    margin-block-end: var(--al-space-4);
    background: var(--al-warn-bg);
    border: 1px solid color-mix(in srgb, var(--al-warn) 45%, transparent);
    border-radius: var(--al-radius-surface);
}
.al-confirmbar p {
    margin: 0;
    max-inline-size: 72ch;
    color: var(--al-text);
}
.al-confirmbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--al-space-3);
    margin-block-start: var(--al-space-3);
}