/* ============================================================
   SGS · estilos propios de las pantallas sobre nubi ui
   (dashboard, kanban, KPIs, equipo, reportes, catálogos, calendario).
   Solo presentación: no cambia IDs ni clases que use el JS.
   ============================================================ */

/* ── Encabezado de pantalla (los módulos lo pintan dentro de #app) ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.page-head p { font-size: 13px; color: var(--mute); margin: 2px 0 0; }
.page-head > :not(:first-child) { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Tarjetas de filtros arriba de las listas */
#app > .card.border-0.shadow-sm.mb-4:has(.form-select, .form-control):not(:has(.card-header)):not(.kpi-global-card):not(.rpt-card) { background: var(--line-2); border: 1px solid var(--line) !important; box-shadow: none !important; }

/* ── Insignias propias ── */
.badge-wine { --bg-b: var(--brand-50); --fg-b: var(--brand); }
.badge-rol-admin { --bg-b: var(--crit-bg); --fg-b: var(--crit-ink); }
.badge-rol-lider { --bg-b: var(--brand-50); --fg-b: var(--brand); }
.badge.bg-light { background: var(--line-2) !important; color: var(--ink-2) !important; border-color: var(--line) !important; }
.badge.bg-dark { background: var(--ink) !important; color: var(--surface) !important; }
.badge.bg-white { background: var(--surface) !important; color: var(--ink-2) !important; }
.btn-info { background: var(--info-bg); color: var(--info-ink); border: 1px solid transparent; }
.btn-info:hover { filter: brightness(.97); }

/* Interruptor estilo Bootstrap (.form-switch) con aspecto nubi */
.form-switch .form-check-input { appearance: none; -webkit-appearance: none; width: 32px; height: 18px; border-radius: 99px; background: var(--line); border: 0; position: relative; cursor: pointer; transition: background var(--t); flex: none; }
.form-switch .form-check-input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--t); }
.form-switch .form-check-input:checked { background: var(--teal); }
.form-switch .form-check-input:checked::after { transform: translateX(14px); }

/* Lista agrupada (Tipos de actividad) */
.list-group { display: flex; flex-direction: column; margin: 0; padding: 0; }
.list-group-item { display: flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line-2); padding: 10px 16px; }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }
.list-group-item:hover { background: var(--brand-50); }
.list-group-item .btn-sm { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
#app .card-header.tipo-grupo-head { display: flex; align-items: center; gap: 10px; background: var(--line-2); color: var(--ink); }
.tipo-grupo-ico { width: 28px; height: 28px; border-radius: var(--r); display: inline-grid; place-items: center; background: var(--surface); color: var(--brand); border: 1px solid var(--line); }

/* ── Avatares ── */
.avatar-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.avatar-thumb-lg { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; }
img.avatar { object-fit: cover; padding: 0; }
.cv-oc { display: inline-flex; vertical-align: middle; align-items: center; gap: 10px; min-width: 200px; }
.cv-oc .avatar { width: 34px; height: 34px; font-size: 12px; }
.cv-oc-txt { display: grid; gap: 1px; min-width: 0; }
.cv-oc-txt strong { font-weight: 600; color: var(--ink); }
.kpi-global-card .avatar { width: 52px; height: 52px; font-size: 18px; }

/* ── Dashboard (nubi): saludo, etapas, KPIs, paneles ── */
.dash-body { display: grid; gap: 16px; }
.dash-date { margin: 0 0 4px; }
#dash-hero { display: grid; gap: 12px; }
#dash-hero .res-hello { margin-top: -8px; }
.dash-date::first-letter { text-transform: uppercase; }
.res-hello { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.res-hello h1 { font-size: 24px; font-weight: 800; margin: 0; }
.res-hello .hand { font-size: 1.45rem; }
.dash-stages button { flex: 1 1 0; }
.statusbar button em { font: normal 11px var(--f-mono); color: var(--mute); margin-left: 8px; }
.statusbar button.done em, .statusbar button.cur em { color: var(--ink-2); }
.statusbar button:hover { background: var(--line-2); }
.dash-section { display: flex; align-items: baseline; gap: 12px; margin-bottom: -6px; }
.dash-section .t-mute::first-letter { text-transform: uppercase; }

.kpis.kpis-7 { grid-template-columns: 1.5fr repeat(6, minmax(0, 1fr)); }
.kpis.kpis-5 { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.kpi small { display: flex; align-items: center; gap: 6px; }
.kpi small i { color: var(--kc, var(--brand)); font-size: 15px; }
.kpi .bar { margin-top: 2px; }
.kpi .bar i { background: var(--kc, var(--brand)); }
.kpi.big .bar i { background: linear-gradient(90deg, var(--brand), var(--teal)); }
@media (max-width: 1200px) { .kpis.kpis-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis.kpis-7 > .kpi.big { grid-column: span 2; } }
@media (max-width: 1100px) { .kpis.kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .kpis.kpis-7, .kpis.kpis-5 { grid-template-columns: 1fr 1fr; } .kpis.kpis-7 > .kpi.big, .kpis.kpis-5 > .kpi.big { grid-column: 1 / -1; } }

.dash-row { display: grid; gap: 16px; }
.dash-row-2  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-row-2b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-row-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dash-row-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px)  { .dash-row-2, .dash-row-2b, .dash-row-3 { grid-template-columns: 1fr; } }
.pnl h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.pnl h3 i { color: var(--brand); font-size: 17px; }
.card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.card-head h3 i { color: var(--brand); }
.pnl .chart svg { max-height: 300px; }
.dash-empty { text-align: center; padding: 24px 0; margin: 0; }

/* Ranking: lista con barras de nubi */
.rank-list { display: grid; gap: 10px; }
.rk { display: grid; grid-template-columns: minmax(0, 40%) 1fr auto; align-items: center; gap: 10px; }
.rk-n { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .bar i { background: var(--brand-100); }
.rk.top .bar i { background: linear-gradient(90deg, var(--brand), var(--teal)); }
.rk b { font-size: 12.5px; min-width: 2ch; text-align: right; }

/* Mapa de calor especialista × mes */
.heat-wrap { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 11px; }
.heat th { color: var(--mute); font-weight: 600; text-align: center; padding: 2px 4px; font-family: var(--f-mono); }
.heat th:first-child { text-align: left; font-family: var(--f); }
.heat td { text-align: center; padding: 4px 2px; border-radius: var(--r-sm); font-family: var(--f-mono); min-width: 28px; }
.heat td.heat-n { text-align: left; white-space: nowrap; color: var(--ink-2); font-family: var(--f); padding-right: 8px; background: none !important; }

/* Comentario automático */
.dash-note { border-left: 3px solid var(--brand); }
.dash-note-in { display: flex; gap: 10px; align-items: flex-start; }
.dash-note-in i { color: var(--brand); font-size: 18px; flex: none; margin-top: 1px; }
.dash-note-in p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
/* ── KPIs: ficha del especialista + tarjetas por indicador ── */
.kpi-bar-track { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.kpi-bar-fill { height: 100%; border-radius: 99px; transition: width .3s var(--ease); }
.kpi-pct-text { font-size: 32px; font-weight: 800; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-global-card { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; padding: 18px 20px; border-color: var(--brand-100); background: var(--brand-50); }
.kg-who { display: flex; align-items: center; gap: 14px; }
.kg-who h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.kg-val { text-align: right; display: grid; gap: 4px; justify-items: end; }
.kg-val small { font-size: 12px; color: var(--mute); }
.kg-bar { grid-column: 1 / -1; }
.kg-bar .kpi-bar-track { background: var(--surface); height: 8px; }
.kpis.kpis-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis.kpis-ind { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpis.kpis-ind { grid-template-columns: 1fr; } .kpi-global-card { grid-template-columns: 1fr; } .kg-val { text-align: left; justify-items: start; } }
.kpi .kpi-pct { margin-left: auto; }
.kpi b .t-mute { font-weight: 500; font-size: .7em; }
.kpi-card { transition: box-shadow var(--t); }
.kpi-card:hover { box-shadow: var(--sh-2); }
tr.table-primary > td { background: var(--brand-50) !important; }
.semaforo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 2px var(--surface); }
.rank { width: 26px; height: 26px; border-radius: var(--r); display: inline-grid; place-items: center; font: 600 12px var(--f-mono); background: var(--line-2); color: var(--ink-2); }
.rank-0 { background: var(--warn-bg); color: var(--warn-ink); }
.rank-1 { background: var(--brand-50); color: var(--brand); }
.rank-2 { background: var(--teal-50); color: var(--teal); }

/* ── Equipo: métricas (nubi .metric) con tono por tarjeta ── */
.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-info .metric-icon { background: var(--info-bg); color: var(--info-ink); }
.metric-ok   .metric-icon { background: var(--ok-bg);   color: var(--ok-ink); }
.metric-warn .metric-icon { background: var(--warn-bg); color: var(--warn-ink); }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Reportes ── */
.rpt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .rpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .rpt-grid { grid-template-columns: 1fr; } }
.rpt-card { align-content: start; transition: box-shadow var(--t), transform var(--t); }
.rpt-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.rpt-card p { margin: 0; }
.rpt-ico { width: 40px; height: 40px; border-radius: var(--r); background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-size: 20px; }
.rpt-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cp-lbl { font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }

/* ── Tipos de actividad ── */
.tipo-card { overflow: hidden; }
.tipo-card .section-h { border-bottom: 1px solid var(--line); }

/* ── Configuración KPI ── */
.cfg-card { max-width: 640px; overflow: hidden; }
.cfg-row { display: grid; grid-template-columns: 1fr 180px 92px; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.cfg-row.last { border-bottom: 0; }
.cfg-lbl { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--ink); margin: 0; }
.cfg-ico { width: 28px; height: 28px; border-radius: var(--r); background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: none; }
.cfg-range { width: 100%; accent-color: var(--brand); cursor: pointer; }
.cfg-num input { width: 100%; text-align: center; }
.cfg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 560px) { .cfg-row { grid-template-columns: 1fr 92px; } .cfg-range { grid-column: 1 / -1; grid-row: 2; } }

/* ── Mi perfil ── */
.perfil-card { display: grid; justify-items: center; gap: 6px; padding: 24px; text-align: center; }
.perfil-card h2 { font-size: 18px; font-weight: 700; margin: 6px 0 0; }
.perfil-avatar { width: 96px !important; height: 96px !important; font-size: 30px !important; object-fit: cover; }

/* ── Calendario: leyenda en el panel de control ── */
.cal-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.cal-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; background: var(--c); }
/* ── Kanban (patrón nubi .kanban.fixed: 3 columnas a lo ancho, alto completo) ── */
.kanban-board.kanban.fixed { align-items: stretch; height: calc(100dvh - var(--topbar-h) - 58px - 110px); min-height: 380px; }
.kanban-board .col { flex: 1 1 0; min-width: 270px; display: flex; flex-direction: column; }
.kanban-board .col-head { flex: none; }
.kanban-board .col-head .col-t { display: flex; align-items: center; gap: 8px; }
.kanban-board .col-head .col-t i { color: var(--kc, var(--brand)); font-size: 16px; }
.kanban-board .col-head { box-shadow: inset 0 -2px 0 var(--kc, var(--brand)); }
.kanban-board .col-cards { flex: 1; overflow-y: auto; min-height: 0; }
.kanban-board .col-cards > * { flex: none; }
.kanban-col.drag-over .col-cards { background: var(--brand-50); }
.col-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 8px; color: var(--mute); font-size: 12.5px; text-align: center; }
.col-empty i { font-size: 22px; opacity: .6; }
.kc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kc-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.kc-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.kcard .cell-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mute); }
.kc-state { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kc-marcas { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.kc-marcas .chip { padding: 2px 8px; font-size: 11px; }
.kc-acts { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.kc-acts .sp { flex: 1; }
.kc-acts .btn-icon { width: 28px; height: 28px; padding: 0; }
.kc-danger { color: var(--crit-ink) !important; }
.kanban-card.dragging { opacity: .45; transform: rotate(1.5deg); }
@media (hover: none), (pointer: coarse) { .kcard[draggable="true"] { cursor: pointer; } }
.kanban-card.sgs-celebra { animation: sgsCelebra 1.4s var(--ease); }
@keyframes sgsCelebra { 0% { box-shadow: 0 0 0 0 rgba(1,126,132,.45); } 40% { box-shadow: 0 0 0 8px rgba(1,126,132,.12); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(1,126,132,0); } }
.kanban-who { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.kanban-who .avatar { width: 36px; height: 36px; font-size: 13px; }
.kanban-who > div { display: grid; }
@media (max-width: 767px) { .kanban-board.kanban.fixed { height: auto; min-height: 0; } .kanban-board .col { min-width: 82vw; } }
/* ── Actividades: marcas, QR, evidencias ── */
.marca-item { border-radius: var(--r); }
.qr-wrapper { background: #fff; }
.qr-wrapper canvas, .qr-wrapper img { max-width: 200px; }

/* ── Calendario (FullCalendar) con tokens de nubi ── */
.fc { --fc-border-color: var(--line); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--line-2);
      --fc-today-bg-color: var(--brand-50); --fc-button-bg-color: var(--surface); --fc-button-border-color: var(--line);
      --fc-button-text-color: var(--ink); --fc-button-hover-bg-color: var(--line-2); --fc-button-hover-border-color: var(--line);
      --fc-button-active-bg-color: var(--brand); --fc-button-active-border-color: var(--brand);
      --fc-event-border-color: transparent; font-family: var(--f); font-size: 13px; color: var(--ink); }
.fc .fc-button { font: 500 13px var(--f); border-radius: var(--r) !important; box-shadow: none !important; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--on-brand); }
.fc .fc-toolbar-title { font-size: 18px; font-weight: 700; text-transform: capitalize; }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.fc .fc-event { border-radius: var(--r-sm); font-size: 12px; }
.fc .fc-list-event:hover td { background: var(--brand-50); }

/* ── Listas (tabla en tarjeta + pie con conteo y paginación) ── */
.list-card { overflow: hidden; }
.list-card table.table { margin: 0; }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--line-2); flex-wrap: wrap; }
.list-foot .sgs-pagination { padding: 0; }
.cell-main { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.cell-sub { display: block; font-size: 12px; color: var(--mute); }
.cell-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.cell-tags .chip { padding: 2px 8px; font-size: 11px; }
td .btn-icon { width: 30px; height: 30px; padding: 0; }

/* ── Formularios en tarjetas ── */
.form-card .card-head h3 { font-size: 14px; }
.form-card .card-head .badge { margin-left: auto; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.marca-grp { margin-bottom: 10px; }
.marca-grp-t { font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-bottom: 4px; }
#marcas-checklist { columns: 3 200px; column-gap: 16px; }
#marcas-checklist .marca-grp { break-inside: avoid; }

/* ── Ventana de actividad: metadatos y secciones ── */
.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.act-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.act-meta i { color: var(--mute); }
.section { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.section-h .btn { font-weight: 500; }
.section-h .sp { flex: 1; }
.section-b { padding: 14px 16px; }
.asist-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.asist-sum .sp { flex: 1; }
.qr-wrapper { display: inline-block; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; }
/* ── Ayuda (mismos estilos que la guía del SGD) ── */
.fx-metric-icon { grid-area: i; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 19px; }
.ay { max-width: 1100px; margin: 0 auto; }
.ay-hero h1 { max-width: 20ch; }
.ay-hero .hand { margin-top: 4px; }
.ay-sec { padding: 40px 0; border-top: 1px solid var(--line); display: grid; gap: 22px; }
.ay-sec > header { display: grid; gap: 8px; }
.ay-sec h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; }
.ay-sec > header p { max-width: 62ch; }
.ay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .ay-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ay-steps { grid-template-columns: 1fr; } }
.ay-step { padding: 16px; display: grid; gap: 8px; align-content: start; border-top: 3px solid var(--c); justify-items: start; }
.ay-step-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ay-n { font: 600 12px var(--f-mono); color: var(--ink); background: var(--line-2); border-radius: 99px; padding: 2px 9px; }
.ay-step-top i { font-size: 22px; color: var(--c); }
.ay-step h3 { font-size: 15px; }
.ay-step p { font-size: 13px; }
.ay-desvios { display: grid; gap: 12px; }
.ay-desvios h3 { font-size: 15px; }
.ay-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ay-mini { display: flex; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ay-mini > i { font-size: 20px; color: var(--brand); flex: none; margin-top: 2px; }
.ay-mini b { font-size: 13.5px; }
.ay-mini p { font-size: 12.5px; margin-top: 2px; }
.ay-role { padding: 16px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.ay-role h3 { font-size: 15px; }
.ay-role p { font-size: 13px; }
.ay-acciones { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; }
.ay-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ay-card > i { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-size: 19px; }
.ay-card h3 { font-size: 14.5px; align-self: end; }
.ay-card p { font-size: 13px; grid-column: 2; }
.ay-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ay-flow li { position: relative; display: grid; gap: 6px; justify-items: start; padding: 4px 16px 16px 0; align-content: start; }
.ay-flow li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 38px; right: 8px; border-top: 2px dashed var(--line); }
.ay-flow .ay-n { background: var(--brand); color: var(--on-brand); position: relative; z-index: 1; }
.ay-flow li > i { font-size: 24px; color: var(--brand); }
.ay-flow li b { font-size: 14px; }
.ay-flow li > span:last-child { font-size: 12.5px; color: var(--ink-2); }
.ay-tools { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ay-tool { padding: 16px; display: grid; gap: 8px; align-content: start; }
.ay-tool kbd { justify-self: start; font: 600 14px var(--f-mono); padding: 4px 10px; }
.ay-tool h3 { font-size: 15px; }
.ay-tool p { font-size: 13px; }
.ay-snd { padding: 16px 18px; display: grid; gap: 12px; }
.ay-snd-h h3 { font-size: 15px; }
.ay-snd-l { display: flex; flex-wrap: wrap; gap: 8px; }
.ay-snd-b { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 8px 12px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.ay-snd-b:hover { border-color: var(--teal); background: var(--teal-50); }
.ay-snd-b > i { color: var(--teal); }
.ay-snd-b b { display: block; font-size: 13px; }
.ay-snd-b small { color: var(--mute); font-size: 11.5px; }
.ay-tips { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ay-tip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 4px; align-content: start; }
.ay-tip b { font: 800 22px var(--f); color: var(--brand); }
.ay-tip span { font-size: 13px; color: var(--ink-2); }
.ay-faq { display: grid; gap: 8px; max-width: 820px; }
.ay-foot { border-top: 1px solid var(--line); padding: 24px 0 8px; text-align: center; color: var(--mute); font-size: 12.5px; }
@media (max-width: 640px) { .ay-flow li:not(:last-child)::after { display: none; } .ay-acciones { grid-template-columns: 1fr; } }

/* ── Ayuda SGS: 5 etapas + matriz actividad × indicador ── */
.ay-steps.ay-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ay-steps.ay-steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ay-steps.ay-steps-5 { grid-template-columns: 1fr; } }
.ay-matrix-wrap { overflow-x: auto; }
.ay-matrix { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.ay-matrix th { padding: 12px 8px; text-align: center; font-weight: 600; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); vertical-align: bottom; }
.ay-matrix th i { display: block; font-size: 20px; color: var(--c); margin: 0 auto 4px; }
.ay-matrix th.ay-mx-t, .ay-matrix td.ay-mx-t { text-align: left; padding-left: 16px; }
.ay-matrix td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--line-2); }
.ay-matrix td.ay-mx-t b { display: block; font-weight: 600; color: var(--ink); }
.ay-matrix td.ay-mx-t small { display: block; color: var(--mute); font-size: 11.5px; margin-top: 1px; }
.ay-matrix tr.ay-mx-g td { background: var(--line-2); font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); text-align: left; padding: 7px 16px; }
.ay-matrix tbody tr:not(.ay-mx-g):hover td { background: var(--brand-50); }
.ay-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.ay-inds { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ay-ind { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--r-lg); background: var(--surface); }
.ay-ind > i { font-size: 22px; color: var(--c); flex: none; }
.ay-ind b { font-size: 14px; }
.ay-ind p { font-size: 12.5px; margin: 2px 0 0; color: var(--ink-2); }
.ay-calc li > span:last-child { max-width: 30ch; }
.o-ic.help { font-weight: 700; text-decoration: none; }