/* =============================================================
   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; }
}