:root {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-alt: #172033;
    --border: #334155;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #5a6e85;
    --primary-hover: #7a8da3;
    --primary-soft: #2a3543;
    --accent: #3a4a5c;
    --success: #22c55e;
    --warning: #f59e0b;
    --warning-soft: #3a2a0a;
    --danger: #ef4444;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 1.2rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 1.2rem 0 0.6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- NAV ---------------- */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 64px;
}
.brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);
    text-decoration: none;
    margin-right: 1rem;
}
.brand:hover { text-decoration: none; }
.topbar nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    height: 100%;
}
.topbar nav a {
    color: var(--text);
    padding: 0 0.85rem;
    height: 36px;
    line-height: 36px;
    border-radius: 7px;
    font-weight: 500;
    font-size: 0.98rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.topbar nav .nav-drop { display: inline-flex; align-items: center; }
.topbar nav .nav-drop > .nav-drop-toggle { display: inline-flex; align-items: center; }
.topbar nav a:hover {
    background: var(--primary-soft);
    color: var(--primary);
    text-decoration: none;
}
.topbar nav a.active {
    background: var(--primary);
    color: #fff;
}

/* ---------------- PAGE ---------------- */
main.page {
    max-width: 1400px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

/* ---------------- CARDS ---------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ---------------- FORMS ---------------- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
label {
    display: block;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

/* Filter bar (grid que cresce com o conteúdo) */
.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
    align-items: end;
    margin-bottom: 1rem;
}
.filtros .acoes {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* ---------------- BUTTONS ---------------- */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    height: 36px;
    background: var(--primary);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 7px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.05s, border-color 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
}
button:hover, .btn:hover { background: var(--primary-hover); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled, button[disabled] {
    opacity: .55; cursor: not-allowed; transform: none;
}

/* Variantes de cor */
button.secondary, .btn.secondary,
button.btn-secondary, .btn.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
button.secondary:hover, .btn.secondary:hover,
button.btn-secondary:hover, .btn.btn-secondary:hover { background: var(--surface-alt); }

button.danger, .btn.danger,
button.btn-danger, .btn.btn-danger { background: var(--danger); }
button.danger:hover, .btn.danger:hover,
button.btn-danger:hover, .btn.btn-danger:hover { background: #b91c1c; }

button.warn, .btn.warn,
button.btn-warn, .btn.btn-warn { background: var(--warning); color: #fff; }
button.warn:hover, .btn.warn:hover,
button.btn-warn:hover, .btn.btn-warn:hover { background: #c97a06; }

button.success, .btn.success,
button.btn-success, .btn.btn-success { background: var(--success); color: #fff; }
button.success:hover, .btn.success:hover,
button.btn-success:hover, .btn.btn-success:hover { background: #16a34a; }

/* Tamanhos */
.btn-sm, button.btn-sm {
    padding: 0.3rem 0.65rem;
    height: 28px;
    font-size: 0.82rem;
    border-radius: 6px;
}
.btn-lg, button.btn-lg {
    padding: 0.7rem 1.4rem;
    height: 44px;
    font-size: 1rem;
}

/* Botão de ícone (quadrado) */
.btn-icon, button.btn-icon {
    width: 36px; padding: 0; aspect-ratio: 1;
    border-radius: 7px;
}
.btn-icon.btn-sm, button.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg, button.btn-icon.btn-lg { width: 44px; }

/* Grupo de acções alinhado */
.row-actions, .btn-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.row-actions form, .btn-group form {
    display: inline-flex; margin: 0;
}

/* ---------------- TABLES ---------------- */
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: 0.92rem;
}
thead th {
    background: var(--surface-alt);
    font-weight: 600;
    text-align: left;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
tbody td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td.wrap { white-space: normal; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-alt); }

/* Tabela excel legada — manter compatibilidade */
.tabela-excel { border: 0; }
.tabela-excel th { background: var(--surface-alt); border-bottom: 1px solid var(--border); border: 0; }
.tabela-excel td { border: 0; border-bottom: 1px solid var(--border); }

/* ---------------- BADGES ---------------- */
.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-muted);
}
.badge.ok { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.badge.erro { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.badge.duplicado { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.badge.pendente, .badge.novo { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }

/* ---------------- ALERT ---------------- */
.alert-banner {
    border: 1px solid var(--warning);
    background: var(--warning-soft);
    color: var(--text);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
}
.alert-banner strong { color: var(--warning); }
.alert-banner ul { margin: 0.4rem 0 0.6rem 1.2rem; }

/* ---------------- DASHBOARD GRID ---------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow);
}
.stat .label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.stat .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}
.stat.warn .value { color: var(--warning); }
.stat.err .value { color: var(--danger); }
.stat.ok .value { color: var(--success); }

/* ---------------- UTILITIES ---------------- */
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.text-right { text-align: right; }

/* ---------------- RESPONSIVE: hamburger nav + helpers ---------------- */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.only-mobile { display: none !important; }
.only-desktop { display: block; }

@media (max-width: 900px) {
  html, body { font-size: 14px; }
  .only-mobile { display: block !important; }
  .only-desktop { display: none !important; }

  /* Topbar com hamburger */
  .topbar-inner {
    padding: 0 0.7rem;
    height: 56px;
    gap: 0.4rem;
  }
  .brand span { font-size: .95rem; }
  .nav-toggle { display: inline-flex; margin-left: auto; }

  /* Nav escondida por defeito; abre quando body.nav-open */
  .topbar nav {
    display: none;
    position: absolute;
    top: 56px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #1a2230;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0.5rem 0.7rem;
    gap: 0.25rem;
    z-index: 1000;
  }
  body.nav-open .topbar nav { display: flex; }
  /* Esconder conteudo quando menu esta aberto — evita <select> Android
     furarem por cima do menu e o utilizador ver as duas coisas sobrepostas */
  body.nav-open main.page { visibility: hidden; }
  .topbar nav a {
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
    border-radius: 6px;
    text-align: left;
    background: #2a3543;
    color: #fff;
  }
  .topbar nav a:hover,
  .topbar nav a.active { background: #3a4a5c; }
  /* Dropdowns: empilhados, sem flutuar */
  .nav-drop, .nav-drop-menu { width: 100%; }
  .nav-drop-menu {
    position: static; box-shadow: none; padding: 0.2rem 0 0.2rem 0.6rem;
    background: #14202d; min-width: 0;
    display: block;
    border-radius: 6px;
    margin-top: 0.2rem;
  }
  .nav-drop-menu a {
    padding: 0.5rem 0.8rem; font-size: 0.9rem;
    background: #243140; color: #fff; opacity: 1;
    margin: 0.1rem 0;
  }

  main.page { margin: 0.8rem auto; padding: 0 0.7rem; }
  .card { padding: 0.9rem; border-radius: 8px; }
  .filtros { grid-template-columns: 1fr; gap: 0.6rem; }
  .filtros .acoes { flex-wrap: wrap; }
  button, .btn { padding: 0.6rem 0.9rem; font-size: 0.95rem; }

  /* Tabelas: scroll horizontal + NAO partir palavras letra-a-letra.
     Nomes ficam numa linha; se nao coubem, faz-se scroll lateral. */
  table { display: block; max-width: 100%; overflow-x: auto; }
  thead th, tbody td { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  thead th, tbody td { padding: 0.45rem 0.55rem; font-size: 0.85rem; }
  thead th { font-size: 0.72rem; }
}

@media (max-width: 560px) {
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.05rem; }
  .topbar-inner { padding: 0 0.5rem; }
  .brand img { height: 30px !important; }
  .brand span { display: none; }
  main.page { padding: 0 0.5rem; }
  .card { padding: 0.7rem; }
  .row-actions { width: 100%; }
  .row-actions form, .row-actions .btn, .row-actions button { flex: 1; }
}

/* ---------------- WO CARDS (mobile substituto da tabela) ---------------- */
.wo-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.wo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem 0.8rem;
  align-items: center;
}
.wo-card .wo-status {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: bold;
  background: var(--surface-alt); color: var(--text-muted);
  grid-row: span 2;
}
.wo-card .wo-status.ok    { background: rgba(34,197,94,.15);  color: var(--success); }
.wo-card .wo-status.nok   { background: rgba(239,68,68,.15);  color: var(--danger); }
.wo-card .wo-status.pend  { background: rgba(245,158,11,.15); color: var(--warning); }
.wo-card .wo-status.emp   { background: rgba(139,92,246,.20); color: #a78bfa; }
.wo-card .wo-status.atec  { background: rgba(14,165,233,.20); color: #38bdf8; }
.wo-card .wo-main { display: flex; flex-direction: column; min-width: 0; }
.wo-card .wo-num {
  font-family: monospace; font-weight: 600; font-size: 1rem;
  color: var(--text); display: inline-flex; align-items: center; gap: .4rem;
}
.wo-card .wo-tipo { font-size: .85em; color: var(--text-muted); }
.wo-card .wo-meta {
  font-size: .82em; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.2rem;
}
.wo-card .wo-meta .when { font-family: monospace; }
.wo-card .wo-tec {
  grid-column: 1 / -1;
  font-size: .9em; color: var(--text);
  border-top: 1px solid var(--border); padding-top: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.wo-card .wo-actions { display: flex; gap: 0.35rem; }
.wo-card .wo-conta {
  font-family: monospace; font-size: .8em;
  padding: .15rem .4rem; border-radius: 4px;
  background: var(--surface-alt); color: var(--text-muted);
}
.wo-card .wo-conta.repetido {
  background: #b34700; color: #fff; font-weight: 600;
}

/* ---------------- PILLS de contagem ---------------- */
.pills {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  margin: 0.4rem 0 0.8rem; font-size: .85em;
}
.pills .pill {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text-muted);
}
.pills .pill b {
  font-weight: 700;
  font-size: 1.05em;
  background: rgba(34,197,94,.18); color: var(--success);
  padding: .05rem .45rem; border-radius: 999px; min-width: 1.4em; text-align: center;
}
.pills .pill.warn b  { background: rgba(245,158,11,.18); color: var(--warning); }
.pills .pill.err  b  { background: rgba(239,68,68,.18); color: var(--danger); }
.pills .pill.info b  { background: rgba(96,165,250,.18); color: #60a5fa; }

/* ---------------- Painel ranking por tecnico ---------------- */
.tec-panel { margin-top: 1.2rem; }
.tec-panel > summary {
  list-style: none; cursor: pointer;
  padding: .6rem .9rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  font-weight: 600; display: flex; align-items: center; gap: .5rem;
}
.tec-panel > summary::-webkit-details-marker { display: none; }
.tec-panel > summary::after {
  content: "▾"; margin-left: auto; opacity: .6; transition: transform .15s;
}
.tec-panel[open] > summary::after { transform: rotate(180deg); }
.tec-panel .tec-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem; margin-top: .6rem;
}
.tec-panel .tec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .7rem .9rem;
}
.tec-panel .tec-card h4 {
  margin: 0 0 .35rem; font-size: .9rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.tec-panel .tec-card ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.tec-panel .tec-card li {
  display: flex; justify-content: space-between; padding: .15rem 0;
  font-size: .92em;
}
.tec-panel .tec-card li b { font-variant-numeric: tabular-nums; color: var(--success); }

/* ---------------- DASHBOARD DISTRIBUIÇÃO mobile ---------------- */
.dist-mobile { display: flex; flex-direction: column; gap: 0.6rem; }
.dist-grand {
  display: flex; align-items: center; gap: 0.6rem;
  padding: .6rem .9rem;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 8px; font-size: .9em;
}
.dist-grand b { font-size: 1.15em; color: var(--text); margin-left: auto; }
.dist-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .7rem .9rem;
}
.dist-card .dist-head {
  display: flex; align-items: baseline; gap: .6rem;
  border-bottom: 1px solid var(--border); padding-bottom: .4rem; margin-bottom: .5rem;
}
.dist-card .dist-tec { font-weight: 600; flex: 1; min-width: 0; }
.dist-card .dist-total {
  font-variant-numeric: tabular-nums; font-weight: 700;
  background: var(--surface-alt); padding: .1rem .5rem; border-radius: 12px;
}
.dist-card .dist-eur {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--success);
}
.dist-card .dist-tipos {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.dist-card .dist-tipo {
  display: inline-flex; align-items: baseline; gap: .3rem;
  background: var(--surface-alt); padding: .15rem .5rem;
  border-radius: 999px; font-size: .82em;
}
.dist-card .dist-tipo .t { color: var(--text-muted); }
.dist-card .dist-tipo b { color: var(--success); font-variant-numeric: tabular-nums; }

/* ---------------- DASHBOARD SLA mobile ---------------- */
.sla-mobile { display: flex; flex-direction: column; gap: .35rem; }
.sla-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .6rem; align-items: center;
  padding: .55rem .7rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
}
.sla-row .sla-tec { font-weight: 500; min-width: 0; }
.sla-row .sla-perc { font-variant-numeric: tabular-nums; font-size: 1.02em; }
.sla-row .sla-ind .badge { font-size: .72em; }

/* ---------------- Contraste em bg claro forcado inline ---------------- */
/* Muitos templates definem inline style="background:#f4f4f4" (thead etc) mas
 * herdam text color do body (claro em tema dark) -> texto invisivel.
 * Regra abaixo forca texto escuro quando o autor definiu bg claro inline.
 * Baixa specificidade -> qualquer color: inline no mesmo elemento tem prioridade.
 * Cobre: #fff, #ff*, #fe*, #fc*, #fa*, #f8*, #f4*, #f2*, #f0*, #ec*, #eff*, #ebe*
 */
[style*="background:#f"], [style*="background:#F"],
[style*="background:#eff"], [style*="background:#EFF"],
[style*="background:#ebe"], [style*="background:#EBE"],
[style*="background:#ecf"], [style*="background:#ECF"],
[style*="background: #f"], [style*="background: #F"] {
  color: #0f172a;
}

/* ==================================================================
   MOBILE UX FINE-TUNING (04/09/2026)
   Melhorias touch-friendly aplicadas globalmente. Nao altera aspecto
   desktop — so afina para toque (min 44px), fonts anti-zoom iOS, forms
   confortaveis, cards compactos. Aplica a admin + /eu/... (tecnico).
   ================================================================== */

/* iOS zoom automatico em input <16px — forcar 16px em todos os inputs */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]),
  select, textarea {
    font-size: 16px !important;
    min-height: 42px;
    padding: 0.5rem 0.7rem;
  }

  /* Botoes com area touch minima (44x44 recomendado iOS/Android) */
  button, .btn, input[type=submit], input[type=button],
  a.btn, .row-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    font-size: .95rem;
  }
  /* Botoes pequenos inline (dentro de tabelas) — nao aplicar min-height */
  td button, td .btn, td a.btn, td input[type=submit] {
    min-height: 32px;
    font-size: .82rem;
    padding: .3rem .6rem;
  }

  /* Cards menos apertados */
  .card {
    margin-bottom: 0.8rem;
  }

  /* Flash messages full width */
  .flash, .alert { margin: .4rem 0; padding: .7rem .9rem; font-size: .9rem; }

  /* Details/summary mais tocaveis */
  details summary {
    padding: .5rem 0;
    min-height: 32px;
  }

  /* Forms empilhados (label + input) */
  form label {
    display: block;
    margin-top: .6rem;
    font-size: .88rem;
  }
  /* Inline forms (buttons + selects lado a lado) mantem flex */
  form.inline-form label,
  form[style*="inline"] label {
    display: inline-block;
    margin-top: 0;
  }

  /* Grelha 2-col vira 1-col */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Modais/dialogs full width */
  dialog, .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 1rem !important;
  }

  /* Tables — melhor scroll indicator */
  table { -webkit-overflow-scrolling: touch; }

  /* Header sticky para navegar longas listas */
  .card > h2:first-child { position: sticky; top: 0; background: var(--surface); z-index: 5; padding-top: .5rem; }
}

/* Very small (<400px) — ajustes extra */
@media (max-width: 400px) {
  html, body { font-size: 13.5px; }
  .card { padding: 0.6rem !important; }
  h1 { font-size: 1.1rem; }
  h2 { font-size: .95rem; }
  main.page { padding: 0 0.4rem; }
  /* Botões full-width em stacks */
  .row-actions { flex-direction: column; }
  .row-actions > * { width: 100%; }
}

/* Evitar overflow horizontal global */
html, body { overflow-x: hidden; }
main.page { max-width: 100%; }