/* assets/css/sm-ui.css
   SISTEMA VISUAL ÚNICO DEL ERP — tokens + componentes.
   Reglas (ver DOCS/UI-SISTEMA.md):
     1. Nada de style="" ni <style> en PHP/HTML. Si falta algo, se agrega acá.
     2. Estado = forma + color: pill/notice con tono semántico (ok, warn, bad, info, neutral).
     3. Plata siempre con .sm-num (tabular) y alineada a la derecha en tablas.
   Se carga en includes/header.php para todo el ERP. El portal del cliente usa
   portal-cliente.css (mismos tokens de marca). Helpers PHP: includes/ui.php. */

:root {
    /* Marca */
    --sm-dark: #0f172a;
    --sm-accent: #FEBC35;
    --sm-primary: #2A61A8;
    --sm-primary-ink: #fff;        /* texto sobre --sm-primary (en Taller Pro el primario es amarillo: tinta oscura) */
    --sm-header: #17355C;
    /* Neutros (sesgo azul, como el resto del ERP) */
    --sm-bg: #f8fafc;
    --sm-surface: #ffffff;
    --sm-surface-2: #f1f5f9;
    --sm-line: rgba(15, 23, 42, .08);
    --sm-ink: #0f172a;
    --sm-ink-2: #334155;
    --sm-muted: #64748b;
    /* Semánticos (los mismos que los toasts de sm-feedback.css) */
    --sm-ok: #16a34a;     --sm-ok-bg: #dcfce7;     --sm-ok-ink: #166534;
    --sm-warn: #d97706;   --sm-warn-bg: #fef3c7;   --sm-warn-ink: #92400e;
    --sm-bad: #dc2626;    --sm-bad-bg: #fee2e2;    --sm-bad-ink: #991b1b;
    --sm-info: #2563eb;   --sm-info-bg: #dbeafe;   --sm-info-ink: #1e40af;
    --sm-neutral-bg: #e2e8f0; --sm-neutral-ink: #334155;
    /* Forma */
    /* Tokens sólo de tema (a propósito NO se definen acá): --sm-r-xs --sm-r-sm --sm-r-md --sm-r-lg --sm-r-pill.
       El CSS de las pantallas los usa como var(--sm-r-sm, 12px): sin tema rige el valor de respaldo (Clásico y el
       portal quedan igual al píxel); cada tema en assets/css/temas/ fija su forma. Candado: jobs/test_forma.php. */
    --sm-radius: 16px;
    --sm-radius-sm: 10px;
    --sm-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px -10px rgba(15, 23, 42, .18);
    /* Tarjetas (todas, sm-tarjetas.css; tanda 32): esquina, sombra, contorno e imagen de fondo. */
    --sm-card-radius: var(--sm-radius, 16px);
    --sm-card-shadow: var(--sm-shadow);
    --sm-card-ring: 0 0 0 0 transparent;
    --sm-card-fondo: none;
    --sm-gap: 16px;
    /* Tipografía */
    --sm-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sm-font-display: var(--sm-font);
    /* Movimiento (rápido: tocar/hover · normal: cambios de estado · lento: pantallas y hojas) */
    --sm-dur-fast: 150ms;
    --sm-dur: 220ms;
    --sm-dur-slow: 320ms;
    --sm-ease: cubic-bezier(.4, 0, .2, 1);
    --sm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    /* Menú (riel, panel de sección, barra inferior y hoja "Más": assets/css/sm-nav.css) */
    --sm-nav-bg: #ffffff;
    --sm-nav-bg-blur: rgba(255, 255, 255, .97);
    --sm-nav-ink: #1e293b;
    --sm-nav-muted: #64748b;
    --sm-nav-hover: #f1f5f9;
    --sm-nav-line: rgba(15, 23, 42, .06);
    --sm-nav-active-bg: var(--sm-dark);
    --sm-nav-active-ink: var(--sm-accent);
    --sm-scrim: rgba(15, 23, 42, .35);
    /* Nombres viejos (header.php, estilos.css y pantallas sin sanear): apuntan a los tokens,
       así un tema también les llega. No usar en código nuevo. */
    --brand-primary: var(--sm-primary);
    --brand-header: var(--sm-header);
    --brand-dark: var(--sm-ink);   /* 24 de 33 usos viejos son color de texto */
    --brand-light: var(--sm-surface);
    --brand-accent: var(--sm-accent);
    --bg-main: var(--sm-bg);
    --bg-app: var(--sm-surface-2);
    --surface: var(--sm-surface);   /* tarjetas de historial y panel (estilos.css) */
    --text-muted: var(--sm-muted);
}
body { background-color: var(--sm-bg); color: var(--sm-ink); font-family: var(--sm-font); }
.sm-display { font-family: var(--sm-font-display); }

/* ---------- TIPOGRAFÍA DE DATOS ---------- */
.sm-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-muted { color: var(--sm-muted); }
.sm-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-muted); }
.sm-section-title { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: 1rem; font-weight: 800; color: var(--sm-ink); }
.sm-section-title .material-symbols-outlined { color: var(--sm-muted); }
.sm-section-title .sm-section-aside { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--sm-muted); }

/* ---------- CARD ---------- */
.sm-card {
    background: var(--sm-surface); border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius); box-shadow: var(--sm-shadow);
    overflow: hidden;
}
.sm-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sm-line); }
.sm-card-title { margin: 0; font-size: .95rem; font-weight: 800; color: var(--sm-ink); }
.sm-card-head .sm-card-aside { margin-left: auto; }
.sm-card-body { padding: 18px; }
.sm-card-body--flush { padding: 0; }
.sm-card--flat { box-shadow: none; }
/* Franja de estado a la izquierda: se usa para "requiere atención", no como adorno. */
.sm-card--ok   { border-left: 4px solid var(--sm-ok); }
.sm-card--warn { border-left: 4px solid var(--sm-warn); }
.sm-card--bad  { border-left: 4px solid var(--sm-bad); }
.sm-card--info { border-left: 4px solid var(--sm-info); }

/* ---------- PILL (estado) ---------- */
.sm-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--sm-r-pill, 999px);
    font-size: .72rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em;
    white-space: nowrap; vertical-align: middle;
    background: var(--sm-neutral-bg); color: var(--sm-neutral-ink);
}
.sm-pill .material-symbols-outlined { font-size: 15px; }
.sm-pill--ok   { background: var(--sm-ok-bg);   color: var(--sm-ok-ink); }
.sm-pill--warn { background: var(--sm-warn-bg); color: var(--sm-warn-ink); }
.sm-pill--bad  { background: var(--sm-bad-bg);  color: var(--sm-bad-ink); }
.sm-pill--info { background: var(--sm-info-bg); color: var(--sm-info-ink); }
.sm-pill--dark { background: var(--sm-dark);    color: var(--sm-accent); }
.sm-pill--solid.sm-pill--ok   { background: var(--sm-ok);   color: #fff; }
.sm-pill--solid.sm-pill--warn { background: var(--sm-warn); color: #fff; }
.sm-pill--solid.sm-pill--bad  { background: var(--sm-bad);  color: #fff; }
.sm-pill--solid.sm-pill--info { background: var(--sm-info); color: #fff; }

/* ---------- NOTICE (aviso en página / barra flotante) ---------- */
.sm-notice {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; border-radius: var(--sm-radius-sm);
    background: var(--sm-info-bg); color: var(--sm-info-ink);
    border: 1px solid rgba(37, 99, 235, .18);
}
.sm-notice > .material-symbols-outlined { font-size: 22px; flex: none; }
.sm-notice-body { flex: 1; min-width: 0; }
.sm-notice-title { font-weight: 800; margin: 0 0 2px; font-size: .92rem; }
.sm-notice-text { margin: 0; font-size: .85rem; }
.sm-notice-action { flex: none; align-self: center; }
/* En celular el botón del aviso baja abajo del texto (al lado aplastaba el texto a una palabra por línea). */
@media (max-width: 575px) { .sm-notice { flex-wrap: wrap; } .sm-notice-action { flex-basis: 100%; padding-left: 34px; } }
.sm-notice--ok   { background: var(--sm-ok-bg);   color: var(--sm-ok-ink);   border-color: rgba(22, 163, 74, .2); }
.sm-notice--warn { background: var(--sm-warn-bg); color: var(--sm-warn-ink); border-color: rgba(217, 119, 6, .25); }
.sm-notice--bad  { background: var(--sm-bad-bg);  color: var(--sm-bad-ink);  border-color: rgba(220, 38, 38, .2); }
.sm-notice--float {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1070;
    width: min(560px, calc(100vw - 32px)); box-shadow: 0 14px 34px -12px rgba(15, 23, 42, .45);
}
.sm-notice--float[hidden] { display: none; }
@media (max-width: 991px) { .sm-notice--float { bottom: calc(var(--sm-tabbar-height, 64px) + 12px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- KPI ---------- */
.sm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sm-gap); }
.sm-kpi {
    background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow); padding: 16px 18px; display: grid; gap: 4px; align-content: start;
    color: inherit; text-decoration: none;
}
a.sm-kpi:hover { border-color: rgba(15, 23, 42, .18); color: inherit; }
.sm-kpi-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted); display: flex; align-items: center; gap: 6px; }
.sm-kpi-value { font-size: 1.55rem; font-weight: 800; color: var(--sm-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.sm-kpi-sub { font-size: .8rem; color: var(--sm-muted); }
.sm-kpi--ok .sm-kpi-value { color: var(--sm-ok); }
.sm-kpi--warn .sm-kpi-value { color: var(--sm-warn); }
.sm-kpi--bad .sm-kpi-value { color: var(--sm-bad); }

/* ---------- TABLA ---------- */
.sm-table-wrap { overflow-x: auto; }
.sm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sm-table th {
    text-align: left; padding: 10px 14px; background: var(--sm-surface-2);
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted);
    border-bottom: 1px solid var(--sm-line); white-space: nowrap;
}
.sm-table td { padding: 10px 14px; border-bottom: 1px solid var(--sm-line); vertical-align: middle; color: var(--sm-ink-2); }
.sm-table tr:last-child td { border-bottom: 0; }
.sm-table .sm-num, .sm-table th.sm-num { text-align: right; }
.sm-table tfoot td { font-weight: 800; color: var(--sm-ink); background: var(--sm-surface-2); }

/* ---------- VACÍO ---------- */
.sm-empty { text-align: center; padding: 32px 16px; color: var(--sm-muted); }
.sm-empty .material-symbols-outlined { font-size: 40px; opacity: .45; display: block; margin: 0 auto 6px; }

/* ---------- TRAMOS DE ANTIGÜEDAD (cuentas por cobrar) ---------- */
.sm-aging { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 575px) { .sm-aging { grid-template-columns: repeat(2, 1fr); } }
.sm-aging-cell { border-radius: var(--sm-radius-sm); padding: 10px 12px; background: var(--sm-surface-2); display: grid; gap: 2px; }
.sm-aging-cell b { font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--sm-ink); }
.sm-aging-cell span { font-size: .72rem; color: var(--sm-muted); font-weight: 600; }
.sm-aging-cell--warn { background: var(--sm-warn-bg); }
.sm-aging-cell--bad { background: var(--sm-bad-bg); }
.sm-aging-cell--bad b { color: var(--sm-bad-ink); }

/* ---------- ESTADO DE ORDEN ----------
   Mismos colores que estado_color() de includes/estados_orden.php.
   Clase por estado: sm_estado_clase($estado) en includes/ui.php → "sm-estado--en_reparacion". */
.sm-estado--presupuestado       { --estado-color: #6f42c1; }
.sm-estado--pendiente           { --estado-color: #0dcaf0; }
.sm-estado--esperando_repuestos { --estado-color: #ffc107; }
.sm-estado--en_reparacion       { --estado-color: #0d6efd; }
.sm-estado--finalizado          { --estado-color: #198754; }
.sm-estado--entregado           { --estado-color: #6c757d; }
.sm-estado--cancelado           { --estado-color: #ef4444; }
.sm-estado-stripe { border-left: 4px solid var(--estado-color, #6c757d); }
.sm-estado-pill {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--sm-r-pill, 999px);
    font-size: .7rem; font-weight: 700; white-space: nowrap;
    background: var(--estado-color, #6c757d); color: #fff;
}
.sm-estado--esperando_repuestos.sm-estado-pill, .sm-estado--pendiente.sm-estado-pill { color: #0f172a; }

/* ---------- PÁGINA ---------- */
.sm-page { max-width: 1200px; }
.sm-page--angosta { max-width: 900px; }
.sm-maxw-campo { max-width: 220px; }

/* ---------- ENTREGA SIN IMPORTE (assets/js/sm-entrega.js) ---------- */
.sm-entrega-motivos { display: grid; gap: 6px; }
.sm-entrega-motivo {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--sm-line); border-radius: var(--sm-radius-sm); cursor: pointer; font-weight: 600;
}
.sm-entrega-motivo:has(input:checked) { border-color: var(--sm-ink); background: var(--sm-surface-2); }
.sm-entrega #smEntregaPatente { letter-spacing: .12em; font-weight: 800; }
.sm-entrega-pin { letter-spacing: .4em; font-weight: 800; text-align: center; }

/* ---------- AVATAR ---------- */
.sm-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--sm-dark); color: var(--sm-accent);
    font-size: 1.7rem; font-weight: 800;
}

/* ---------- NOVEDADES DEL SISTEMA (includes/Novedades.php) ---------- */
.sm-nov .modal-header, .sm-nov .modal-footer { border: 0; }
.sm-nov-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; }
.sm-nov-h .material-symbols-outlined { color: var(--sm-accent); }
.sm-nov-version + .sm-nov-version { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sm-line); }
.sm-nov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sm-nov-fecha { color: var(--sm-muted); font-size: .85rem; }
.sm-nov-titulo { font-size: 1rem; font-weight: 800; margin: 0 0 10px; }
.sm-nov-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sm-nov-lista li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.sm-nov-lista .material-symbols-outlined { flex: none; font-size: 20px; color: var(--sm-ink-2); margin-top: 1px; }
.sm-nav-version { display: block; text-align: center; font-size: .68rem; color: var(--sm-muted); text-decoration: none; padding: 2px 0 6px; }
.sm-nav-version:hover { color: var(--sm-ink); }

/* ---------- COMBOS / KITS FUERA DE LA WEB (admin_serviciosmantenimiento, admin_promos) ---------- */
.svc-fuera, .promo-fuera { margin-bottom: 16px; flex-wrap: wrap; }
.svc-fuera-lista { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.svc-fuera-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc-fuera-lista .btn-link { color: var(--sm-bad-ink); text-align: left; }
.svc-fuera-switch { display: flex; align-items: center; gap: 8px; padding-left: 2.6em; }
.svc-fuera-switch .form-check-input { border-color: var(--sm-bad); }
.svc-fuera-switch .form-check-input:checked { background-color: var(--sm-bad); border-color: var(--sm-bad); }
.svc-fuera-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .25); }

/* ---------- SELECTOR DE PROMOS / COMBOS (modal de editar_orden y nueva_orden; datos: includes/combos_promo.php) ---------- */
.sm-promo-modal { border-radius: var(--sm-r-md, 16px); border-top: 5px solid var(--sm-ok); }
.sm-promo-buscar-ico { left: 12px; top: 11px; }
.sm-promo-buscar { padding-left: 2.25rem; } /* deja lugar a la lupa (con ps-4 el texto la pisaba) */
.sm-promo-filtro { max-width: 170px; }
.sm-promo-list { max-height: 52vh; overflow: auto; }
/* Fondo fijo también en :hover (el .btn de Bootstrap lo volvería transparente). */
.sm-promo-row, .sm-promo-row:hover { background: var(--sm-surface); }
/* Etiqueta de vertical: el color es de la vertical (no del tema); el fondo es ese color al 10 %. */
.sm-vert { --vert: var(--sm-muted); background: color-mix(in srgb, var(--vert) 10%, transparent); color: var(--vert); font-weight: 700; }
.sm-vert--distribucion { --vert: #c2410c; }
.sm-vert--service { --vert: #0d6efd; }
.sm-vert--revisiones { --vert: #7c3aed; }

/* ---------- SUSTITUTOS EN KITS DE DISTRIBUCIÓN (admin_promos.php) ---------- */
.k-sub { display: block; margin-top: 4px; font-size: .8rem; color: var(--sm-info-ink); }
.k-sub-add { display: block; margin-top: 2px; font-size: .8rem; }
.k-sub-modo { margin-bottom: 6px; padding: 6px 10px; border-radius: var(--sm-radius-sm, 8px); background: var(--sm-info-bg); color: var(--sm-info-ink); font-size: .85rem; }

/* ---------- REPORTE SEMANAL (insights_historico.php) ---------- */
.sm-insight-frame { display: block; width: 100%; min-height: 900px; border: 0; background: var(--sm-bg); }

/* ---------- SELECTOR DE TEMA (mi_perfil.php › Apariencia, includes/temas.php) ---------- */
.sm-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sm-tema {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; cursor: pointer;
    border: 1.5px solid var(--sm-line); border-radius: var(--sm-radius-sm); background: var(--sm-surface);
    transition: border-color var(--sm-dur) var(--sm-ease), transform var(--sm-dur-fast) var(--sm-ease);
}
.sm-tema:hover { transform: translateY(-2px); }
.sm-tema:has(input:checked) { border-color: var(--sm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-primary) 20%, transparent); }
.sm-tema input { position: absolute; top: 12px; right: 12px; accent-color: var(--sm-primary); }
.sm-tema .sm-pill { align-self: flex-start; }
.sm-tema-muestra { display: flex; gap: 6px; }
.sm-tema-muestra i { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--sm-line); }
.sm-tema-txt strong { display: block; color: var(--sm-ink); }
.sm-tema-txt small { display: block; color: var(--sm-muted); line-height: 1.3; }

/* ---------- PIE DE PÁGINA (includes/footer.php) ---------- */
.footer-premium {
    background: var(--sm-surface); padding: 20px 30px; border-radius: var(--sm-r-lg, 24px);
    border: 1px solid var(--sm-line); box-shadow: 0 4px 20px rgba(0, 0, 0, .02);
    margin: 40px 20px 20px 20px;
}
.footer-brand-info { display: flex; align-items: center; gap: 12px; color: var(--sm-ink-2); }
.footer-brand-info strong { font-weight: 800; letter-spacing: -0.5px; color: var(--sm-ink); }
.footer-meta-info { display: flex; align-items: center; justify-content: flex-end; gap: 20px; color: var(--sm-muted); font-size: .85rem; font-weight: 600; }
.footer-ico { font-size: 18px; }
.footer-ico--ok { color: var(--sm-accent); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--sm-surface-2); padding: 4px 12px; border-radius: var(--sm-r-pill, 50px); font-size: .75rem; color: var(--sm-ink-2); }
.status-dot { width: 8px; height: 8px; background: var(--sm-ok); border-radius: 50%; box-shadow: 0 0 8px color-mix(in srgb, var(--sm-ok) 50%, transparent); }
@media (max-width: 991px) {
    .footer-premium { margin: 20px 15px 100px 15px; padding: 25px 20px; text-align: center; }
    .footer-row { flex-direction: column; gap: 15px; }
    .footer-meta-info { justify-content: center; flex-direction: column; gap: 10px; }
}

/* ---------- CENTRO DE AYUDA (ayuda.php, includes/Ayuda.php) ---------- */
.sm-ayuda { max-width: 1000px; }
.sm-ayuda-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sm-ayuda-top-aside { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-ayuda-buscar { position: relative; display: block; margin-bottom: 10px; }
.sm-ayuda-buscar .material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sm-muted); pointer-events: none; }
.sm-ayuda-buscar .form-control { padding-left: 42px; border-radius: var(--sm-radius-sm); min-height: 44px; }
.sm-ayuda-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 20px; }
.sm-ayuda-link {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px; text-decoration: none; color: var(--sm-ink);
    background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-sm);
}
.sm-ayuda-link:hover, .sm-ayuda-link:focus-visible { border-color: var(--sm-primary); color: var(--sm-ink); }
.sm-ayuda-link .material-symbols-outlined { color: var(--sm-primary); flex: none; }
.sm-ayuda-link strong { display: block; font-size: .92rem; }
.sm-ayuda-link small { display: block; color: var(--sm-muted); line-height: 1.3; }
.sm-ayuda-link[hidden], .sm-ayuda-tema[hidden] { display: none; }
.sm-ayuda-tema { margin-bottom: var(--sm-gap); scroll-margin-top: 80px; }
.sm-ayuda-tema .sm-card-head > .material-symbols-outlined { color: var(--sm-primary); }
.sm-ayuda-body { line-height: 1.55; color: var(--sm-ink-2); }
.sm-ayuda-body h3 { font-size: .98rem; font-weight: 800; color: var(--sm-ink); margin: 20px 0 8px; }
.sm-ayuda-body h3:first-child { margin-top: 0; }
.sm-ayuda-body ul, .sm-ayuda-body ol { padding-left: 1.2rem; }
.sm-ayuda-body li + li { margin-top: 4px; }
.sm-ayuda-body .sm-notice { margin: 12px 0; }
.sm-ayuda-body .table { font-size: .88rem; }
.sm-ayuda-pasos { counter-reset: paso; list-style: none; padding-left: 0 !important; display: grid; gap: 8px; }
.sm-ayuda-pasos > li { counter-increment: paso; position: relative; padding-left: 40px; min-height: 28px; }
.sm-ayuda-pasos > li + li { margin-top: 0; }
.sm-ayuda-pasos > li::before {
    content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; background: var(--sm-dark); color: var(--sm-accent); font-weight: 800; font-size: .85rem;
}
.sm-ayuda-destacado { border-left: 4px solid var(--sm-accent); background: var(--sm-surface-2); padding: 12px 16px; border-radius: 0 var(--sm-radius-sm) var(--sm-radius-sm) 0; margin-bottom: 16px; }
.sm-ayuda-sql { background: var(--sm-dark); color: #a7f3d0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; padding: 12px 14px; border-radius: var(--sm-radius-sm); overflow-x: auto; margin-bottom: 8px; }
.sm-ayuda-sql .text-secondary { color: #94a3b8 !important; }
.sm-ayuda-estados { display: grid; gap: 6px; }
.sm-ayuda-estados > div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: start; }
@media (max-width: 575px) { .sm-ayuda-estados > div { grid-template-columns: 1fr; gap: 2px; } }
.sm-ayuda-arriba { display: inline-block; margin-top: 14px; font-size: .82rem; color: var(--sm-muted); }
.sm-ayuda kbd { background: var(--sm-surface-2); color: var(--sm-ink); border: 1px solid var(--sm-line); box-shadow: none; }


/* Tanda 60: píldora de trabajo en segundo plano (assets/js/sm-tareas.js). Abajo a la izquierda, sobre todo. */
.sm-tarea { position: fixed; left: 16px; bottom: 16px; z-index: 1080; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 170px; padding: 8px 12px 10px;
  border-radius: var(--sm-r-md, 14px); background: var(--sm-surface); color: var(--sm-ink); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow); text-decoration: none; font-size: .82rem; }
.sm-tarea[hidden] { display: none; }
.sm-tarea:hover { color: var(--sm-ink); border-color: var(--sm-info); }
.sm-tarea-ico { font-size: 18px; color: var(--sm-info); animation: sm-tarea-gira 1.4s linear infinite; }
.sm-tarea-barra { flex: 1 1 100%; height: 4px; border-radius: var(--sm-r-pill, 999px); background: var(--sm-info-bg); overflow: hidden; }
.sm-tarea-barra > span { display: block; height: 100%; width: 4%; background: var(--sm-info); transition: width .6s var(--sm-ease, ease); }
.sm-tarea[data-fase="ok"] .sm-tarea-ico { animation: none; color: var(--sm-ok); }
.sm-tarea[data-fase="ok"] .sm-tarea-barra > span { background: var(--sm-ok); }
.sm-tarea[data-fase="error"] .sm-tarea-ico { animation: none; color: var(--sm-bad); }
.sm-tarea[data-fase="error"] .sm-tarea-barra > span { background: var(--sm-bad); }
@keyframes sm-tarea-gira { to { transform: rotate(360deg); } }
@media (max-width: 991.98px) { .sm-tarea { bottom: calc(var(--sm-tabbar-height, 64px) + 12px); left: 12px; } }
@media (prefers-reduced-motion: reduce) { .sm-tarea-ico { animation: none; } }