/* ============ RESPONSIVE / MÓVIL (pase global) ============ */
@media (max-width: 820px){
  #screen{padding:16px}
  .appbar{padding:0 12px;gap:8px}
  .appbar-left{gap:10px;min-width:0}
  .appbar-right{gap:8px}
  .search{max-width:none;min-width:0}
  .user-meta{display:none}                 /* solo el avatar del usuario para ganar espacio */
  .rh-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .rh-tab{white-space:nowrap}
  .proc-topbar{flex-wrap:wrap;gap:8px;height:auto}
  .proc-nombre{min-width:140px;flex:1}
  .proc-wrap{grid-template-columns:1fr;height:auto}
  .proc-palette{display:flex;flex-wrap:wrap;gap:6px;max-height:none}
  .proc-pal-hint{display:none}
  .proc-canvas{height:60vh;min-height:380px}
  .kpi-grid,.proc-kpis{grid-template-columns:repeat(2,1fr) !important}
  .cana-cols,.op-dash-grid{grid-template-columns:1fr !important}
  .card-body,.card > div{overflow-x:auto}
}
@media (max-width: 640px){
  /* En teléfono, Ayudas e Idioma/Moneda viven en ⚙️ Preferencias: se ocultan del encabezado para que no se desborde */
  .help-btn, .country-btn{display:none}
  .search-kbd{display:none}   /* el atajo Ctrl K estorba en pantallas angostas */
}
@media (max-width: 560px){
  #screen{padding:12px}
  .appbar{height:54px}
  .greeting h1{font-size:20px}
  .kpi-grid,.proc-kpis{grid-template-columns:1fr 1fr !important}
  .modgrid{grid-template-columns:1fr !important}
  .taskpanel{width:100vw;max-width:100vw}
  .gsearch-res{position:fixed;left:8px;right:8px;top:60px}
  .role-badge{display:none}
  table{font-size:12px}
  .btn{padding:8px 12px}
  h1{font-size:22px}
  .card table{min-width:max-content}
}

/* Impacto / ROI (Centro de Inteligencia) */
.impacto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0 6px}
.impacto-card{background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:13px;padding:14px 16px}
.impacto-ico{font-size:20px}
.impacto-val{font-size:24px;font-weight:800;line-height:1.1;margin:6px 0 2px}
.impacto-lbl{font-size:12.5px;font-weight:600}
.impacto-det{font-size:11.5px;color:var(--muted,#64748b);margin-top:3px}

/* Biblioteca de plantillas ISO */
.iso-plant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.iso-plant{border:1px solid var(--line,#e2e8f0);border-radius:11px;padding:11px 13px;background:var(--card)}

/* Selector de exportación (CSV / Excel) */
.exp-opts { display: grid; gap: 10px; }
.exp-opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: .15s; }
.exp-opt:hover { border-color: var(--green); background: var(--green-l); }
.exp-opt .exp-ic { font-size: 24px; flex: none; }
.exp-opt b { display: block; font-size: 14px; }
.exp-opt span { font-size: 12px; color: var(--muted); }

/* Preferencias: panel, control segmentado y densidad compacta */
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); }
.pref-row:first-of-type { border-top: none; }
.pref-row b { font-size: 14px; }
.pref-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg-b { border: none; background: none; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: .12s; }
.seg-b.on { background: var(--card); color: var(--green-d); box-shadow: var(--shadow); }

/* Densidad compacta: menos aire en tablas y tarjetas */
body.dense table th, body.dense table td { padding-top: 5px !important; padding-bottom: 5px !important; }
body.dense .card-body { padding-top: 12px; padding-bottom: 12px; }
body.dense table { font-size: 13px; }

/* Motor de tablas configurable */
.tc-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
th.tc-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.tc-sortable:hover { color: var(--green-d); }
.btn.xs { padding: 2px 7px; font-size: 12px; line-height: 1.4; border-radius: 7px; }
.tc-collist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.tc-colrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 9px; }
.tc-colrow:hover { background: var(--bg-soft); }
.tc-colrow label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; flex: 1; }
.tc-colrow input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green); }
.tc-move { display: flex; gap: 4px; }

/* Centro de importación (asistente) */
.imp-wrap { min-width: 520px; max-width: 560px; }
@media (max-width: 600px){ .imp-wrap { min-width: 0; } }
.imp-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.imp-step { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  padding: 8px 6px; border-bottom: 2px solid var(--line); }
.imp-step.act { color: var(--ink); border-color: var(--green); font-weight: 700; }
.imp-step.done { color: var(--green-d); border-color: var(--green); }
.imp-num { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-soft); display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.imp-step.act .imp-num, .imp-step.done .imp-num { background: var(--green); color: #fff; }
.imp-body { min-height: 180px; }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 14px; text-align: center; transition: .15s; }
.imp-drop:hover { border-color: var(--green); background: var(--green-l); }
.imp-drop-ic { font-size: 34px; }
.imp-drop span { font-size: 12px; color: var(--muted); }
.imp-maplist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.imp-maprow { display: grid; grid-template-columns: 1fr 20px 1.2fr; align-items: center; gap: 10px; }
.imp-mapf { font-size: 13px; font-weight: 600; }
.imp-req { color: var(--red); }
.imp-maparrow { text-align: center; color: var(--muted); }
.imp-maprow select { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; font-size: 13px; background: var(--card); color: var(--ink); }
.imp-key { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.imp-key select { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; margin: 0 4px; background: var(--card); color: var(--ink); }
.imp-resumen { display: flex; gap: 10px; margin-bottom: 14px; }
.imp-stat { flex: 1; text-align: center; background: var(--bg-soft); border-radius: 11px; padding: 12px; }
.imp-stat b { display: block; font-size: 24px; }
.imp-stat span { font-size: 11.5px; color: var(--muted); }
.imp-stat.ok b { color: var(--green-d); }
.imp-stat.bad b { color: var(--red); }
.imp-errbox { background: var(--red-tint, #fef2f2); border: 1px solid #fecaca; border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; }
[data-theme="dark"] .imp-errbox { background: #2a1614; border-color: #5b2620; }
.imp-errlist { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; max-height: 140px; overflow-y: auto; }
.imp-errfila { font-weight: 700; color: var(--red); }
.imp-allok { color: var(--green-d); font-weight: 600; }
.imp-preview-t { overflow-x: auto; }
.imp-preview-t table { width: 100%; border-collapse: collapse; font-size: 12px; }
.imp-preview-t th { background: var(--bg-soft); text-align: left; padding: 6px 8px; white-space: nowrap; }
.imp-preview-t td { padding: 5px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.imp-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.imp-done { text-align: center; padding: 10px 0; }
.imp-done-ic { font-size: 44px; }

/* Filtros del motor de tablas */
.tc-bar { flex-wrap: wrap; gap: 8px; }
.tc-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.tc-search input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font-size: 13px;
  background: var(--card); color: var(--ink); min-width: 200px; }
.tc-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--green-l); color: var(--green-d);
  border: 1px solid transparent; border-radius: 20px; padding: 4px 6px 4px 11px; font-size: 12.5px; }
.tc-chip b { font-weight: 700; }
.tc-chip button { border: none; background: rgba(0,0,0,.08); color: inherit; width: 18px; height: 18px;
  border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.tc-chip button:hover { background: rgba(0,0,0,.18); }
.tc-count { font-size: 12px; color: var(--muted); }