/* ==========================================================================
   NEXO Admin Dashboard — styles
   Extraído del <style> inline del deploy original (28-jul-2026).
   ========================================================================== */

*,::after,::before{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#faf9f6;
  --surface:#f3f1ec;
  --surface2:#ffffff;
  --surface3:#ece8df;
  --border:rgba(0,0,0,0.06);
  --border2:rgba(0,0,0,0.12);
  --text:#1f1d1a;
  --muted:#6e6a63;
  --accent:#8aa823;
  --blue:#2563eb;
  --red:#dc2626;
  --amber:#d97706;
  --green:#059669;
  --purple:#7c3aed;
  --cyan:#0891b2;
  --pink:#db2777;
  --brand:#F47B20;
  --radius:10px;
  --font:'DM Sans',sans-serif;
  --mono:'DM Mono',monospace
}

body,html{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;overflow-x:hidden}

/* ---------- Layout shell ---------- */
.shell{display:grid;grid-template-rows:56px 1fr;height:100vh;overflow:hidden}
header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border);background:var(--surface);gap:16px;flex-shrink:0}
.header-left{display:flex;align-items:center;gap:14px;min-width:0}
.logo-img{height:22px;width:auto;display:block}
.brand{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--muted)}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

.pill{font-size:11px;font-weight:500;padding:3px 10px;border-radius:99px;font-family:var(--mono);background:rgba(5,150,105,.1);color:var(--green);border:1px solid rgba(5,150,105,.25)}

.btn-sm{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-family:var(--mono);background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:6px 12px;border-radius:var(--radius);cursor:pointer;transition:all .15s}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm:disabled{opacity:.4;cursor:not-allowed}

@keyframes spin{to{transform:rotate(360deg)}}
.spinning{display:inline-block;animation:spin .7s linear infinite}
.last-updated{font-size:11px;color:var(--muted);font-family:var(--mono)}

main{display:grid;grid-template-columns:240px minmax(0,1fr);overflow:hidden;min-width:0}
aside{border-right:1px solid var(--border);padding:16px 14px;overflow-y:auto;background:var(--surface);display:flex;flex-direction:column;gap:22px;min-width:0}

/* ---------- Sidebar ---------- */
.sidebar-label{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.global-stats{display:flex;flex-direction:column;gap:4px}
.global-stats .gs{font-size:22px;font-family:var(--mono);font-weight:500;line-height:1.2}
.global-stats .gl{font-size:10px;color:var(--muted);margin-top:1px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}

.org-list{display:flex;flex-direction:column;gap:2px}
.org-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;font-size:12px;color:var(--text);transition:all .1s;background:0 0;font-family:var(--font);text-align:left;width:100%}
.org-item:hover{background:var(--surface2)}
.org-item.active{background:var(--surface2);border-color:var(--border2);font-weight:500}
.org-item .org-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.saved-views{display:flex;flex-direction:column;gap:6px}
.sv-chip{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--border);font-size:12px;background:var(--surface2);color:var(--text);transition:all .1s;font-family:var(--font);text-align:left;width:100%;min-width:0}
.sv-chip:hover{border-color:var(--accent)}
.sv-chip.active{background:var(--surface3);border-color:var(--accent)}
.sv-chip .sv-meta{color:var(--muted);font-size:10px;font-family:var(--mono)}
.sv-chip .sv-remove{background:0 0;border:none;color:var(--muted);cursor:pointer;padding:0 0 0 6px;font-size:13px;opacity:0;transition:opacity .1s}
.sv-chip:hover .sv-remove{opacity:1}
.sv-chip .sv-remove:hover{color:var(--red)}
.sv-add{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;border:1px dashed var(--border2);background:0 0;color:var(--muted);font-size:12px;font-family:var(--font);transition:all .1s;width:100%}
.sv-add:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Content ---------- */
.content{overflow-y:auto;overflow-x:hidden;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.content>*{flex-shrink:0}

/* overflow-x era hidden: la lista de clientes tiene 12 columnas y se aplastaban
   en cuanto la ventana bajaba de ~1500px. Ahora scrollea en horizontal. */
.table-scroll{max-height:320px;overflow-y:auto;overflow-x:auto}
.table-scroll table.std thead th{position:sticky;top:0;background:var(--surface2);z-index:2;box-shadow:inset 0 -1px 0 var(--border)}

.title-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.title-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.title-scope{font-size:18px;font-weight:500}
.title-range{color:var(--muted);font-size:14px}
.range-select{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:6px 10px;font-size:12px;font-family:var(--font);color:var(--text);outline:0;cursor:pointer}
.range-select:focus{border-color:var(--accent)}

/* ---------- Metric cards ---------- */
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.metric-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;min-width:0}
.metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.metric-card.blue::before{background:var(--blue)}
.metric-card.green::before{background:var(--green)}
.metric-card.amber::before{background:var(--amber)}
.metric-card.red::before{background:var(--red)}
.metric-card.purple::before{background:var(--purple)}
.metric-card.cyan::before{background:var(--cyan)}
.metric-card.pink::before{background:var(--pink)}
.metric-val{font-size:26px;font-weight:400;font-family:var(--mono)}
.metric-lbl{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.metric-sub{font-size:11px;color:var(--muted);margin-top:6px}
.trend{font-size:11px;font-family:var(--mono);margin-top:6px}
.trend.up{color:var(--green)}
.trend.down{color:var(--red)}
.trend.flat{color:var(--muted)}

/* ---------- Charts ---------- */
.row-2{display:grid;grid-template-columns:2fr 1fr;gap:16px;min-width:0}
.row-2>*{min-width:0}
.chart-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;min-width:0;overflow:hidden}
.chart-title{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chart-title .hint{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;font-size:11px}
.chart-legend{display:flex;gap:14px;font-size:11px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:5px;color:var(--muted)}
.leg-line{width:14px;height:2px;display:inline-block;flex-shrink:0}
.leg-line.dashed{background:0 0;border-top:2px dashed currentColor}

/* ---------- AI stats ---------- */
.ai-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ai-stat{padding:14px 14px 12px 14px;border-left:2px solid var(--border2);min-width:0}
.ai-stat.clean{border-left-color:var(--green)}
.ai-stat.corrected{border-left-color:var(--amber)}
.ai-stat.manual{border-left-color:var(--blue)}
.ai-stat.unmatched{border-left-color:var(--red)}
.ai-stat.total{border-left-color:var(--muted)}
.ai-stat .pct{font-size:22px;font-family:var(--mono);font-weight:500}
.ai-stat .count{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.ai-stat .lbl{font-size:10px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}

.corr-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.corr-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 14px 12px 14px;text-align:left;min-width:0}
.corr-card .pct{font-size:22px;font-family:var(--mono);font-weight:500}
.corr-card .lbl{font-size:11px;color:var(--muted);margin-top:6px;text-transform:capitalize}

/* ---------- Tables ---------- */
table.std{width:100%;border-collapse:collapse;font-size:12px}
table.std th{text-align:left;padding:6px 10px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
table.std td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
table.std tr:last-child td{border-bottom:none}
table.std tr:hover td{background:rgba(0,0,0,.025)}
td.trunc{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.num{font-family:var(--mono);text-align:right}

.seven .day-cell{font-weight:500;min-width:105px;vertical-align:top;padding-top:10px}
.seven .day-cell .day-window{display:block;color:var(--muted);font-family:var(--mono);font-weight:400;font-size:10px;margin-top:2px;text-transform:none;letter-spacing:0}
.seven .win-cell{font-family:var(--font);font-size:12px;font-weight:500}
.seven .daily-total{font-family:var(--mono);font-size:14px;font-weight:500;text-align:right;vertical-align:middle;background:rgba(0,0,0,.02)}
.seven .day-row-first td{border-top:1px solid var(--border2)}
.seven .footer-row td{border-top:2px solid var(--border2);border-bottom:none;padding-top:12px;font-weight:500;font-family:var(--mono)}

.turno-summary{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);flex-wrap:wrap;font-family:var(--mono)}
.turno-chip{background:var(--surface);padding:3px 8px;border-radius:99px;border:1px solid var(--border)}
.turno-edit-link{background:0 0;border:none;color:var(--muted);cursor:pointer;font-family:var(--font);font-size:11px;text-decoration:underline;padding:0 0 0 6px}
.turno-edit-link:hover{color:var(--accent)}

.grid-2x2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;min-width:0}
.grid-2x2>*{min-width:0}

.mini-bar-bg{height:3px;background:rgba(0,0,0,.06);border-radius:2px;width:60px}
.mini-bar{height:3px;border-radius:2px;background:var(--blue)}

.precision-cell{font-family:var(--mono);font-size:11px}
.precision-cell.high{color:var(--green)}
.precision-cell.mid{color:var(--amber)}
.precision-cell.low{color:var(--red)}

/* ---------- States ---------- */
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:16px;color:var(--muted);font-family:var(--mono);font-size:12px}
.big-spinner{width:32px;height:32px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;gap:16px;color:var(--red);font-family:var(--mono);font-size:12px;text-align:center;padding:24px}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ---------- Modals ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(31,29,26,.4);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;z-index:1000;padding:60px 20px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius);padding:24px;max-width:660px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal h3{font-size:14px;font-weight:500;margin-bottom:4px}
.modal .modal-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.modal-section{margin-bottom:22px}
.modal-section h4{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}

.turno-editor{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.turno-row{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px}
.turno-row:last-child{border-bottom:none}
.turno-row input[type=text],.turno-row select{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:5px 8px;font-size:12px;font-family:var(--font);color:var(--text);outline:0;width:100%}
.turno-row select{font-family:var(--mono)}
.turno-row input:focus,.turno-row select:focus{border-color:var(--accent)}
.turno-row .remove-btn{background:0 0;border:none;color:var(--red);cursor:pointer;font-size:14px;padding:0 6px}
.turno-add-btn{display:block;width:100%;padding:8px;background:0 0;border:1px dashed var(--border2);border-radius:var(--radius);color:var(--muted);cursor:pointer;font-size:12px;font-family:var(--font);margin-top:8px}
.turno-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.turno-meta{font-size:11px;color:var(--muted);margin-top:6px;font-family:var(--mono)}

.override-section{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-top:10px}
.override-section .ov-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:500}
.override-section .ov-header .remove-btn{background:0 0;border:none;color:var(--red);cursor:pointer;font-size:12px}
.add-override-bar{display:flex;gap:8px;align-items:center;padding:10px 12px;background:var(--surface);border-radius:var(--radius);margin-top:10px;font-size:12px}
.add-override-bar select{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--text);font-family:var(--font);outline:0;flex:1;min-width:0}

.modal-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}
.btn-primary{background:var(--accent);color:var(--bg);border:1px solid var(--accent);border-radius:var(--radius);padding:8px 16px;font-family:var(--mono);font-size:12px;cursor:pointer;font-weight:500}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:0 0;border:1px solid var(--border2);border-radius:var(--radius);padding:8px 14px;font-family:var(--mono);font-size:12px;cursor:pointer;color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-link{background:0 0;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0;text-decoration:underline;font-family:var(--font)}
.btn-link:hover{color:var(--text)}

.sv-dialog input[type=text]{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:8px 10px;font-size:13px;color:var(--text);outline:0;font-family:var(--font)}
.sv-dialog input[type=text]:focus{border-color:var(--accent)}
.sv-dialog .sv-pre{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:8px;padding:8px 10px;background:var(--surface);border-radius:6px}

/* ---------- Order lookup ---------- */
.order-lookup{display:flex;align-items:center;gap:6px}
.order-lookup input{width:280px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:5px 10px;font-size:11px;font-family:var(--mono);color:var(--text);outline:0}
.order-lookup input:focus{border-color:var(--accent)}
.order-lookup button{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:5px 10px;font-size:11px;font-family:var(--mono);color:var(--muted);cursor:pointer}
.order-lookup button:hover{color:var(--accent);border-color:var(--accent)}
.order-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center;font-size:12px}
.order-result .kv-key{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.order-result .kv-val{font-family:var(--mono)}
.order-result .copy-btn{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:4px 10px;font-size:11px;font-family:var(--mono);color:var(--text);cursor:pointer}
.order-result .copy-btn:hover{color:var(--accent);border-color:var(--accent)}
.order-result.error{color:var(--red);font-family:var(--mono)}

/* ---------- Client list ---------- */
.client-list-controls{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.client-list-controls input.search{flex:1;min-width:180px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:6px 10px;font-size:12px;font-family:var(--font);color:var(--text);outline:0}
.client-list-controls input.search:focus{border-color:var(--accent)}
.sort-toggle{display:inline-flex;border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden}
.sort-toggle button{background:0 0;border:none;padding:5px 10px;font-size:11px;font-family:var(--mono);color:var(--muted);cursor:pointer}
.sort-toggle button.active{background:var(--surface3);color:var(--text)}
.sort-toggle button:not(:last-child){border-right:1px solid var(--border2)}

.alert-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red)}
.alert-dot.orange{background:var(--amber)}
.alert-dot.red{background:var(--red)}
.alert-cell{text-align:center}

.section-header{font-size:13px;font-weight:500;margin:14px 0 8px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.section-header .meta{font-family:var(--mono);color:var(--muted);font-size:11px}

table.sortable th{cursor:pointer;user-select:none}
table.sortable th:hover{color:var(--text)}
table.sortable th .sort-ind{display:inline-block;margin-left:4px;opacity:.5;font-size:9px}
table.sortable th.sorted .sort-ind{opacity:1;color:var(--accent)}

.load-more-btn{display:block;margin:12px auto 0;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:6px 16px;font-size:12px;font-family:var(--mono);color:var(--muted);cursor:pointer}
.load-more-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Activity / cohorts ---------- */
.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.activity-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;border-left:3px solid var(--border2)}
.activity-card.activo{border-left-color:var(--green)}
.activity-card.riesgo{border-left-color:var(--amber)}
.activity-card.inactivo{border-left-color:var(--red)}
.activity-card .count{font-size:24px;font-family:var(--mono);font-weight:500}
.activity-card .lbl{font-size:11px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
.activity-card .pct{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--mono)}

.cohort-table{font-size:11px}
.cohort-table td,.cohort-table th{padding:4px 8px;text-align:center;font-family:var(--mono)}
.cohort-table th{color:var(--muted);font-weight:500;font-size:10px}
.cohort-table td.cohort-label{text-align:left;color:var(--muted)}
.cohort-cell{color:var(--text);border-radius:4px;min-width:38px;display:inline-block;padding:4px 6px}

.dow-card{padding:14px 18px}

/* ---------- Adoption ---------- */
.adoption-section{display:flex;flex-direction:column;gap:16px}
.adoption-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;min-width:0}
.adoption-row>*{min-width:0}

/* ---------- Preferences ---------- */
.pref-row{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.pref-row:last-child{border-bottom:none}
.pref-row label{font-size:13px;color:var(--text)}
.pref-row .pref-desc{font-size:11px;color:var(--muted);margin-top:2px}
.pref-row input[type=number],.pref-row select{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:5px 8px;font-size:13px;font-family:var(--mono);color:var(--text);outline:0;width:100%}
.pref-row input:focus,.pref-row select:focus{border-color:var(--accent)}

/* ==========================================================================
   RESPONSIVE
   El diseño original no tenía ni una media query: rejillas fijas de 5 y 6
   columnas, sidebar de 240px y `height:100vh` + `overflow:hidden`. En un
   portátil las tarjetas quedaban a ~130px y en móvil no se podía ni scrollear.

   Cuatro cortes:
     ≤1400  aflojar las rejillas más anchas (5 y 6 columnas)
     ≤1150  romper las filas de dos columnas en una
     ≤860   soltar el layout: el documento scrollea y la sidebar pasa arriba
     ≤560   una columna, cabecera y modales apilados
   ========================================================================== */

@media (max-width:1400px){
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .corr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ai-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric-val{font-size:24px}
}

@media (max-width:1150px){
  main{grid-template-columns:200px minmax(0,1fr)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row-2,.grid-2x2,.adoption-row{grid-template-columns:minmax(0,1fr)}
  .grid-2x2{grid-template-rows:auto}
  .order-lookup input{width:100%}
  .order-lookup{flex:1 1 240px}
}

@media (max-width:860px){
  /* El punto crítico: liberar la altura fija para que el documento scrollee. */
  html,body{height:auto}
  .shell{height:auto;min-height:100vh;grid-template-rows:auto 1fr;overflow:visible}
  main{display:block;overflow:visible}
  .content{overflow:visible;padding:14px;gap:16px}

  header{flex-wrap:wrap;padding:10px 14px;gap:10px;position:sticky;top:0;z-index:50}
  .header-right{width:100%;flex-wrap:wrap}
  .btn-sm{flex:1 1 auto;justify-content:center;min-height:38px}
  .last-updated{width:100%}

  /* La sidebar pasa a ser una banda superior; proveedores y vistas en
     horizontal con scroll, que es lo único que cabe. */
  aside{border-right:none;border-bottom:1px solid var(--border);padding:14px;gap:16px}
  .global-stats{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;gap:0 18px;justify-content:start}
  .global-stats .gs{font-size:19px}
  .global-stats .gl{margin-bottom:0}
  .org-list,.saved-views{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .org-item{width:auto;flex:0 0 auto;border-color:var(--border);background:var(--surface2)}
  .sv-chip{flex:0 0 auto;min-width:150px}
  .sv-add{width:auto;flex:0 0 auto}
  .sv-chip .sv-remove{opacity:1}

  .table-scroll{max-height:none}
  .modal-overlay{padding:20px 12px}
  .modal{padding:18px}
  .pref-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .turno-row{grid-template-columns:1fr 1fr;gap:8px}
  .turno-row input[type=text]{grid-column:1/-1}
}

@media (max-width:560px){
  .metrics,.activity-grid{grid-template-columns:minmax(0,1fr)}
  .corr-grid,.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content{padding:12px}
  .chart-card{padding:14px}
  .metric-val{font-size:22px}
  .title-scope{font-size:16px}
  .modal-actions{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .modal-actions>div{display:flex;gap:8px}
  .modal-actions>div>*{flex:1}
}

/* Dedos, no ratón: los objetivos táctiles pequeños se agrandan. */
@media (hover:none) and (pointer:coarse){
  .btn-sm,.btn-primary,.btn-ghost{min-height:40px}
  .org-item,.sv-chip{min-height:38px}
  .sv-chip .sv-remove{opacity:1;padding:0 8px}
  ::-webkit-scrollbar{width:8px;height:8px}
}