/* =============================================================
   DSA Compliance · Skin de FORMULARIOS modernos (reutilizable)
   Rail lateral de secciones + tarjetas de sección + filas toggle.
   Lo usan los diálogos de DPC/SST/TSC/Canales al modernizarse.
   Piezas Razor: FormSection.razor + el rail .dsa-rail en cada Form*.
   ============================================================= */

/* ---- Shell: rail a la izquierda + panel a la derecha ---- */
.dsa-form-shell {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* ---- Rail vertical de secciones ---- */
.dsa-rail {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    position: sticky;
    top: .5rem;
}
.dsa-rail__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .75rem;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: #475569;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background .16s ease, color .16s ease;
}
.dsa-rail__item .rzi { font-size: 20px; flex-shrink: 0; }
.dsa-rail__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsa-rail__item:hover { background: #eef2ff; color: #4c3cc9; }
.dsa-rail__item.is-active { background: #eef2ff; color: #4c3cc9; font-weight: 600; }
.dsa-rail__item.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px; border-radius: 3px;
    background: #4c3cc9;
}

/* ---- Panel de contenido ---- */
.dsa-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    animation: dsaPanelFade .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes dsaPanelFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .dsa-panel { animation: none; } }

/* ---- Tarjeta de sección ---- */
.form-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.form-section__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg,#fcfcfd 0%,#fff 100%);
}
.form-section__icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #4c3cc9;
    flex-shrink: 0;
}
.form-section__icon .rzi { font-size: 18px; }
.form-section__title { font-size: .95rem; font-weight: 600; color: #0f172a; }
.form-section__right { margin-left: auto; }
.form-section__body { padding: 1rem; }

/* ---- Rejilla de campos dentro de una sección ---- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .85rem;
}
.form-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid .rz-form-field { width: 100%; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-full { grid-column: 1 / -1; }
@media (max-width: 1000px) {
    .form-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
    .form-grid .span-2, .form-grid .span-full { grid-column: auto; }
}

/* ---- Campos más estilizados: esquinas redondeadas (Radzen usa esta variable) ---- */
.dsa-panel { --rz-input-border-radius: 10px; }
.dsa-panel .rz-textbox,
.dsa-panel .rz-dropdown,
.dsa-panel .rz-datepicker,
.dsa-panel .rz-textarea,
.dsa-panel .rz-form-field-content { border-radius: 10px; }
.dsa-panel .rz-form-field { --rz-input-border-radius: 10px; }

/* ---- Colección plegable: caja de "añadir" que solo aparece al pulsar + Añadir ---- */
.form-collection__add {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: .9rem;
    margin-bottom: .9rem;
    animation: dsaPanelFade .2s ease;
}

/* ---- Footer pegajoso de guardar/cancelar (siempre visible) ---- */
.dsa-form-footer {
    position: sticky; bottom: 0; z-index: 6;
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .8rem .25rem .4rem;
    margin-top: .35rem;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 45%);
}

/* ---- Timeline de seguimiento estilizada + efectos ---- */
.dsa-timeline { position: relative; padding-left: 2.2rem; }
.dsa-timeline::before {
    content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(#4c3cc9, #c7d2fe 70%, #e2e8f0);
}
.dsa-timeline__item {
    position: relative; margin-bottom: .9rem;
    animation: dsaTlIn .35s cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes dsaTlIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .dsa-timeline__item { animation: none; } }
.dsa-timeline__dot {
    position: absolute; left: -2.2rem; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #4c3cc9;
    border: 2px solid #fff; box-shadow: 0 0 0 2px #e0e7ff;
}
.dsa-timeline__dot .rzi { font-size: 15px; }
.dsa-timeline__card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: .65rem .9rem;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.dsa-timeline__card:hover {
    box-shadow: 0 8px 22px rgba(15,23,42,.08);
    transform: translateX(3px); border-color: #c7d2fe;
}
.dsa-timeline__date { font-size: .72rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.dsa-timeline__state { font-size: .95rem; font-weight: 600; color: #0f172a; margin-top: 1px; }
.dsa-timeline__comment { font-size: .85rem; color: #64748b; margin-top: 2px; }

/* ---- Fila toggle limpia (sustituye switches con margin-left a mano) ---- */
.form-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .8rem;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
}
.form-toggle__label { font-size: .88rem; font-weight: 500; color: #334155; }
.form-toggle__hint { font-size: .76rem; color: #94a3b8; margin-top: 1px; }

/* ---- Barra "añadir" en secciones de colección (riesgos/medidas/...) ---- */
.form-addbar {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}
.form-addbar .rz-form-field { flex: 1 1 220px; }

/* ---- Barra de filtros de listado (Syncfusion + botones) alineada a una fila ---- */
.dsa-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-bottom: .5rem;
}
.dsa-filterbar__search { flex: 1 1 260px; min-width: 220px; }
.dsa-filterbar__search .e-input-group { width: 100%; }
.dsa-filterbar__actions {
    margin-left: auto;
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
/* Alturas uniformes: inputs Syncfusion (search + multiselect) y botones Radzen a 38px */
.dsa-filterbar .e-input-group,
.dsa-filterbar .e-multi-select-wrapper { min-height: 38px; }
.dsa-filterbar .rz-button { height: 38px; }

/* ---- Responsive: en estrecho el rail pasa arriba, horizontal scrollable ---- */
@media (max-width: 820px) {
    .dsa-form-shell { flex-direction: column; }
    .dsa-rail {
        flex: none; width: 100%;
        flex-direction: row; overflow-x: auto; position: static;
    }
    .dsa-rail__item.is-active::before { display: none; }
    .form-grid--2 { grid-template-columns: 1fr; }
}

/* ── Cabecera de ficha operativa (compartida DPC: RAT/EIPD/Contrato/Riesgo) ── */
.rat-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    background:linear-gradient(135deg,#f8fafc,#eef2ff); border:1px solid #e2e8f0; border-radius:14px; padding:.9rem 1.1rem; }
.rat-head__main { min-width:0; flex:1 1 320px; }
.rat-head__title { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.rat-head__code { font-size:1.15rem; font-weight:800; color:#0f172a; }
.rat-head__name { font-size:.9rem; color:#64748b; }
.rat-head__chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
.rat-chip { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #c7d2fe; border-radius:999px;
    padding:.2rem .6rem; font-size:.78rem; font-weight:700; background:#eef2ff; color:#4c3cc9; }
.rat-chip .rzi { font-size:15px; }
.rat-chip--soft { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.rat-head__actions { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.rat-act { display:inline-flex; align-items:center; gap:.35rem; border:0; cursor:pointer; border-radius:10px;
    padding:.45rem .8rem; font-size:.82rem; font-weight:700; background:#f1f5f9; color:#475569; transition:transform .12s ease, filter .12s ease; }
.rat-act:hover { transform:translateY(-1px); filter:brightness(.97); }
.rat-act .rzi { font-size:16px; }
.rat-act--ia { background:#f3e8ff; color:#6d28d9; }
.rat-act--info { background:#e0f2fe; color:#0369a1; }
.rat-act--primary { background:#4c3cc9; color:#fff; }
.rat-act--soft { background:#f1f5f9; color:#475569; }

.dsa-empty { color:#94a3b8; font-style:italic; padding:.6rem 0; display:flex; align-items:center; gap:.4rem; justify-content:center; }
.dsa-empty .rzi { font-size:20px; opacity:.6; }

/* ── FormSection plegable (<details> nativo, sin JS) ── */
.form-section--collapsible > summary { cursor:pointer; list-style:none; user-select:none; }
.form-section--collapsible > summary::-webkit-details-marker { display:none; }
.form-section__chevron { margin-left:auto; color:#94a3b8; display:flex; transition:transform .2s ease; }
.form-section--collapsible[open] > summary .form-section__chevron { transform:rotate(180deg); }
.form-section--collapsible > summary:hover { background:linear-gradient(180deg,#f8fafc 0%,#fff 100%); }
.form-section--collapsible[open] > summary { border-bottom:1px solid #f1f5f9; }
.form-section--collapsible:not([open]) > summary { border-bottom:0; }
.form-section--collapsible > summary .form-section__right { margin-left:0; }
.form-section--collapsible[open] > .form-section__body { animation:dsaPanelFade .22s ease; }

/* ── Wizard de pasos (extranet): barra de progreso + transición ── */
.dsa-wizard { display:flex; flex-direction:column; gap:1rem; }
.dsa-wizard__steps { display:flex; gap:.5rem; flex-wrap:wrap; }
.dsa-wizard__step {
    flex:1 1 0; min-width:120px; display:flex; align-items:center; gap:.55rem;
    padding:.6rem .8rem; border:1px solid #e2e8f0; border-radius:12px; background:#fff;
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dsa-wizard__step.is-active { border-color:#4c3cc9; background:#eef2ff; box-shadow:0 4px 14px rgba(76,60,201,.12); }
.dsa-wizard__step.is-done { border-color:#c7d2fe; }
.dsa-wizard__num {
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; background:#f1f5f9; color:#64748b;
}
.dsa-wizard__step.is-active .dsa-wizard__num { background:#4c3cc9; color:#fff; }
.dsa-wizard__step.is-done .dsa-wizard__num { background:#16a34a; color:#fff; }
.dsa-wizard__label { font-size:.82rem; font-weight:600; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsa-wizard__bar { height:6px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.dsa-wizard__bar > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#4c3cc9,#818cf8); transition:width .3s cubic-bezier(.22,.61,.36,1); }
.dsa-wizard__body { animation:dsaPanelFade .25s ease; }

/* ── Notas de caso: burbujas modernas (sustituyen a las .card Bootstrap) ── */
.dsa-notes { display:flex; flex-direction:column; gap:.7rem; }
.dsa-note {
    border:1px solid #e5e7eb; border-radius:14px; background:#fff; overflow:hidden;
    transition:box-shadow .18s ease, transform .18s ease;
}
.dsa-note:hover { box-shadow:0 6px 18px rgba(15,23,42,.06); transform:translateY(-1px); }
.dsa-note__head { display:flex; align-items:center; gap:.55rem; padding:.55rem .85rem; }
.dsa-note__avatar { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.82rem; }
.dsa-note__who { font-weight:600; color:#0f172a; font-size:.88rem; }
.dsa-note__when { font-size:.74rem; color:#94a3b8; margin-left:auto; }
.dsa-note__badge { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.12rem .5rem; border-radius:999px; }
.dsa-note--public  .dsa-note__badge { background:#dcfce7; color:#15803d; }
.dsa-note--internal .dsa-note__badge { background:#fee2e2; color:#b91c1c; }
.dsa-note__body { padding:0 .85rem .7rem; color:#334155; font-size:.9rem; line-height:1.5; }
.dsa-note--public  { border-left:3px solid #16a34a; }
.dsa-note--internal { border-left:3px solid #dc2626; }
.dsa-note-compose { border:1px solid #e5e7eb; border-radius:14px; background:#f8fafc; padding:.85rem; }
.dsa-note-compose__head { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }

/* ── Eventos de caso: tarjetas modernas ── */
.dsa-events { display:flex; flex-direction:column; gap:.7rem; }
.dsa-event {
    border:1px solid #e5e7eb; border-left:3px solid #4c3cc9; border-radius:14px; background:#fff;
    padding:.85rem; transition:box-shadow .18s ease, transform .18s ease;
}
.dsa-event:hover { box-shadow:0 6px 18px rgba(15,23,42,.06); transform:translateY(-1px); }
.dsa-event.is-last { border-left-color:#16a34a; background:linear-gradient(180deg,#f0fdf4 0%,#fff 60%); }
.dsa-event__top { display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.dsa-event__addbar { display:flex; gap:.6rem; align-items:center; margin-bottom:.6rem; }

/* ── Cabecera de caso: reflow en móvil (acciones abajo, chips sueltos) ── */
@media (max-width: 760px) {
    .rat-head { flex-direction:column; align-items:stretch; }
    .rat-head__actions { justify-content:flex-start; }
    .rat-head__actions .rz-button { flex:1 1 auto; }
}

/* =============================================================
   Diálogo a altura completa con pie fijo
   -------------------------------------------------------------
   El pie ya era "sticky", pero sticky solo pega cuando el
   contenido desborda: en una sección corta los botones quedaban
   a media altura, distintos en cada pestaña. Con el diálogo a
   altura fija y el scroll dentro del panel, el pie está siempre
   abajo, y ahí es donde la mano lo busca.

   Se activa con CssClass="dsa-dialog-fill" en las DialogOptions.
   ============================================================= */
.dsa-dialog-fill .rz-dialog-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: .5rem;
}
.dsa-dialog-fill .rz-dialog-content > form,
.dsa-dialog-fill .rz-dialog-content > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dsa-form-shell--fill { flex: 1 1 auto; min-height: 0; }
.dsa-form-shell--fill > .dsa-rail { align-self: stretch; position: static; overflow-y: auto; }
.dsa-form-shell--fill > .dsa-panel { min-height: 0; }
.dsa-panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .35rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.dsa-form-shell--fill .dsa-form-footer {
    flex: 0 0 auto;
    position: static;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    padding: .7rem .25rem .1rem;
}

/* =============================================================
   Etiquetas de un servicio
   -------------------------------------------------------------
   Una rejilla de dos columnas para tres etiquetas es un formulario
   de administración, no una herramienta. Las etiquetas son cosas
   que se ponen y se quitan de un vistazo.
   ============================================================= */
.dsa-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.dsa-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #eef2ff; color: #4338ca;
    border: 1px solid #c7d2fe; border-radius: 999px;
    padding: .28rem .35rem .28rem .7rem;
    font-size: .8rem; font-weight: 600;
    animation: dsaTagIn .18s ease;
}
@keyframes dsaTagIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dsa-tag { animation: none; } }
.dsa-tag__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: 0; border-radius: 50%;
    background: rgba(67, 56, 202, .12); color: #4338ca;
    cursor: pointer; padding: 0;
}
.dsa-tag__x:hover { background: #fecaca; color: #b91c1c; }
.dsa-tag__x .rzi { font-size: 13px; }
.dsa-tag--sugerida {
    background: #fff; color: #64748b; border-style: dashed; border-color: #cbd5e1;
    cursor: pointer; padding-inline: .7rem;
}
.dsa-tag--sugerida:hover { background: #f8fafc; color: #4338ca; border-color: #a5b4fc; }
.dsa-tags__vacio { font-size: .82rem; color: #94a3b8; font-style: italic; }

/* =============================================================
   Ficha de producto
   -------------------------------------------------------------
   La foto a la izquierda y los campos a la derecha, en rejilla
   propia. Antes eran RadzenRow/RadzenColumn anidados tres niveles
   con anchos fijos de doce columnas, que en un diálogo estrecho
   dejaban el código y el nombre en una tira de 80px.
   ============================================================= */
.prod-id {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 1.1rem;
    align-items: start;
}
@media (max-width: 700px) { .prod-id { grid-template-columns: 1fr; } }

.prod-id__foto {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .6rem;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px;
}
.prod-id__pie { font-size: .68rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }

/* Texto de apoyo bajo un campo: cuenta la consecuencia, no repite la etiqueta. */
.prod-ayuda { font-size: .74rem; color: #94a3b8; margin-top: .3rem; line-height: 1.35; }
.prod-ayuda b { color: #b45309; font-weight: 600; }

/* Activo: el interruptor y lo que implica, juntos. */
.prod-activo { display: flex; align-items: center; gap: .65rem; padding-top: .35rem; }
.prod-activo__t { font-size: .85rem; font-weight: 600; color: #0f172a; }

/* Añadir etiqueta: desplegable que crece y botón que no. */
.prod-tag-add { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.prod-tag-add > :first-child { flex: 1 1 240px; min-width: 200px; }
.prod-tag-add .e-btn { flex: 0 0 auto; }

/* =============================================================
   Controles de Syncfusion dentro de un formulario
   -------------------------------------------------------------
   Solo tipografía y separación. Las cajas las gobierna el tema de
   Syncfusion: tocar alturas o paddings internos es exactamente lo
   que descolocó los controles de Radzen en su día.
   ============================================================= */
.dsa-panel .e-input-group,
.dsa-panel .e-control-wrapper { margin-bottom: 0; }
.dsa-panel .e-float-input .e-float-text,
.dsa-panel .e-float-input.e-input-group .e-float-text { font-size: .82rem; }
.dsa-panel .e-input-group input.e-input,
.dsa-panel .e-input-group textarea.e-input,
.dsa-panel .e-control-wrapper .e-input { font-size: .875rem; }
.dsa-panel .e-multi-line-input textarea.e-input { min-height: 90px; }

/* La rejilla de campos manda sobre el ancho por defecto del control. */
.form-grid > .e-control-wrapper,
.form-grid > .e-input-group,
.form-grid .span-full > .e-control-wrapper,
.form-grid .span-full > .e-input-group { width: 100%; }

/* ---- Botones de Syncfusion dentro de un diálogo ----
   El tema trae mayúsculas y una tipografía pensada para una barra de
   herramientas. Aquí solo se normaliza el texto; el resto lo gobierna
   el tema, que es lo que mantiene la coherencia entre pantallas. */
.dsa-panel .e-btn,
.dsa-form-footer .e-btn { font-size: .8rem; text-transform: none; }
.dsa-form-footer { display: flex; align-items: center; gap: .5rem; }
.dsa-form-footer .e-btn + .e-btn { margin-left: 0; }

/* =============================================================
   Encargo: cabecera y alta de líneas
   -------------------------------------------------------------
   Estas reglas vivían en un <style> DENTRO de la sección
   «Información». Al cambiar de pestaña Blazor desmonta esa rama
   del árbol y se lleva el bloque con ella: el badge de firma se
   quedaba sin formato en cuanto pasabas a Tracking. Un estilo no
   puede depender de qué pestaña esté abierta.
   ============================================================= */
.ord-info { display: flex; flex-direction: column; gap: .85rem; padding-top: .4rem; }

.ord-firma {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .6rem; border-radius: 999px;
    font-size: .76rem; font-weight: 800;
    background: #fef3c7; color: #b45309;
}
.ord-firma--ok { background: #dcfce7; color: #15803d; }

/* ---- Alta de una línea del encargo ----
   Dos filas y no una: son cuatro desplegables con textos largos
   -«Auditoría o certificación», «Provoste Matamala Abogados»- y en
   una sola fila cada uno se queda con 180px y se lee a medias.
   Arriba lo que clasifica el encargo, abajo lo que se compra. */
.ord-add {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) 110px;
    gap: .7rem .8rem;
    align-items: end;
}
/* El tipo abarca la primera fila entera: es la decisión que condiciona el resto. */
.ord-add__tipo { grid-column: 1 / -1; }
/* La cantidad no necesita crecer: son dos dígitos. */
.ord-add__cantidad { max-width: 110px; }
.ord-add__accion { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

@media (max-width: 780px) {
    .ord-add { grid-template-columns: 1fr; }
    .ord-add__cantidad { max-width: none; }
}

/* =============================================================
   Timeline: el paso actual se distingue del recorrido
   -------------------------------------------------------------
   Antes todos los hitos pesaban lo mismo, así que la vista contaba
   la historia pero no decía dónde estás. El último lleva el color
   del estado, un halo que respira y la línea se apaga por debajo:
   lo recorrido queda en gris, lo vivo en color.
   ============================================================= */
.dsa-timeline__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.dsa-timeline__head b { font-size: .92rem; font-weight: 650; color: #0f172a; }
.dsa-timeline__head span { font-size: .74rem; color: #94a3b8; font-weight: 600; }
.dsa-timeline__body { font-size: .84rem; color: #64748b; margin-top: .15rem; line-height: 1.45; }

/* El item se pinta como tarjeta sin serlo: menos marco, más recorrido. */
.dsa-timeline__item {
    padding: .5rem .8rem .55rem;
    border-radius: 12px;
    transition: background .18s ease, transform .18s ease;
}
.dsa-timeline__item:hover { background: #f8fafc; transform: translateX(2px); }

/* El hito vivo. Se marca con .is-actual en el primero de la lista. */
.dsa-timeline__item.is-actual { background: #eef2ff; }
.dsa-timeline__item.is-actual .dsa-timeline__dot {
    background: #4f46e5; color: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .18);
    animation: dsaTlPulso 2.4s ease-in-out infinite;
}
@keyframes dsaTlPulso {
    0%, 100% { box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); }
    50%      { box-shadow: 0 0 0 8px rgba(79, 70, 229, .06); }
}
@media (prefers-reduced-motion: reduce) {
    .dsa-timeline__item.is-actual .dsa-timeline__dot { animation: none; }
    .dsa-timeline__item:hover { transform: none; }
}

/* Cada hito entra escalonado: el recorrido se lee de arriba abajo. */
.dsa-timeline__item:nth-child(1) { animation-delay: .00s; }
.dsa-timeline__item:nth-child(2) { animation-delay: .04s; }
.dsa-timeline__item:nth-child(3) { animation-delay: .08s; }
.dsa-timeline__item:nth-child(4) { animation-delay: .12s; }
.dsa-timeline__item:nth-child(5) { animation-delay: .16s; }
.dsa-timeline__item:nth-child(n+6) { animation-delay: .2s; }