/* Fuentes alojadas en local (ver assets/fonts/README.md) */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin-ext-WlFXyXd.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin-78NWkmx.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin-ext-Uqu9TNw.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin-QJNNIVc.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600-latin-ext-Wa6oxBk.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600-latin-uhfYm1a.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400-latin-ext-6jrsEWt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400-latin-RssxsJZ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500-latin-ext-6jrsEWt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500-latin-RssxsJZ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600-latin-ext-6jrsEWt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600-latin-RssxsJZ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-latin-ext-6jrsEWt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-latin-RssxsJZ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Sistema visual del panel (tomado del diseño de referencia del equipo, recoloreado en verde según su captura de colores; los originales no se versionan).
   Tokens en :root; componentes por clase (nada de selectores de elemento globales para no pisar
   futuras vistas). */
:root {
    --scrim: rgba(0, 0, 0, .6); /* fondo de los diálogos modales; igual en claro y oscuro */
    --accent: #0f6e5c; --on-accent: #fff; --ink: #0b6350; --ink-hover: #07463a;
    --accent-soft: rgba(15, 110, 92, .12); --accent-tint: rgba(15, 110, 92, .09);
    --bg: #f5f4f0; --card: #fff; --line: #e5e4de; --line-soft: #eeede8; --input: #cfcdc5;
    --text: #1d2220; --text-2: #3f4744; --muted: #666e6a; --chip: #efeee9; --bar: #c8d3cf; --avatar: #dcebe6;
    --notice-bg: #eef4f1; --notice-bd: #d3e3dc; --notice-tx: #1f4a3f; --soft-card: #fafaf7;
    --err-bg: #fbe9e7; --err-bd: #f1c4bd; --err-tx: #8a1f11;
    --danger: #b3261e; --danger-hover: #8f1d17; --on-danger: #fff; /* botón de acción destructiva: sólido (6,5:1 con el texto) */
    --mono: 'IBM Plex Mono', monospace;
    --sans: 'IBM Plex Sans', system-ui, sans-serif;
    --pos-bg: #dcefe9; --pos-tx: #0a5c4e;
    --th-bg: #1f2a27; --th-tx: #fff; --filter-bg: #eaf0ed; --row-hover: #f7f8f5;
    --warn-bg: #fbefd5; --warn-tx: #7a4a00;
}

/* Modo oscuro (según el diseño de referencia del equipo). Sigue el sistema salvo que el usuario elija tema
   con el botón (data-theme en <html>, guardado en localStorage). */
:root[data-theme="dark"] { color-scheme: dark;
    --accent: #1fb37f; --on-accent: #04201a; --ink: #3ddc9f; --ink-hover: #7aebbf;
    --accent-soft: rgba(31, 179, 127, .16); --accent-tint: rgba(31, 179, 127, .10);
    --bg: #0e1312; --card: #161d1b; --line: #263230; --line-soft: #1f2927; --input: #34413e;
    --text: #e7eeec; --text-2: #c3cdca; --muted: #8b9894; --chip: #212b29; --bar: #35423f; --avatar: #243330;
    --notice-bg: #172a25; --notice-bd: #24443b; --notice-tx: #b9e3d5; --soft-card: #1a2321;
    --err-bg: #3a1c19; --err-bd: #5c2a25; --err-tx: #ffb4a9; --pos-bg: #153b30; --pos-tx: #5fe0ae;
    --danger: #c93c32; --danger-hover: #a82f26; --on-danger: #fff; /* 5,0:1 con el texto */
    --th-bg: #0b100f; --th-tx: #c3cdca; --filter-bg: #1a2321; --row-hover: #1a2321;
    --warn-bg: #3a2d12; --warn-tx: #f2c46b;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark;
        --accent: #1fb37f; --on-accent: #04201a; --ink: #3ddc9f; --ink-hover: #7aebbf;
        --accent-soft: rgba(31, 179, 127, .16); --accent-tint: rgba(31, 179, 127, .10);
        --bg: #0e1312; --card: #161d1b; --line: #263230; --line-soft: #1f2927; --input: #34413e;
        --text: #e7eeec; --text-2: #c3cdca; --muted: #8b9894; --chip: #212b29; --bar: #35423f; --avatar: #243330;
        --notice-bg: #172a25; --notice-bd: #24443b; --notice-tx: #b9e3d5; --soft-card: #1a2321;
        --err-bg: #3a1c19; --err-bd: #5c2a25; --err-tx: #ffb4a9; --pos-bg: #153b30; --pos-tx: #5fe0ae;
        --danger: #c93c32; --danger-hover: #a82f26; --on-danger: #fff;
        --th-bg: #0b100f; --th-tx: #c3cdca; --filter-bg: #1a2321; --row-hover: #1a2321;
    --warn-bg: #3a2d12; --warn-tx: #f2c46b;
    }
}
.theme-toggle { width: 40px; padding: 0; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--text); }
a { color: var(--ink); }
a:hover { color: var(--ink-hover); }
button { cursor: pointer; font-family: inherit; }
h1, h2 { margin: 0; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.4px; }
h2 { font-size: 17px; font-weight: 600; }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); }
.hint-block { display: block; }
.cell-stack { min-width: 0; }

/* ===== Layout con barra lateral ===== */
.app { display: flex; min-height: 100vh; }
.app-nav { width: 208px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 24px 16px; gap: 4px; position: sticky; top: 0; height: 100vh; }
.logo { font-size: 22px; font-weight: 700; letter-spacing: -.5px; padding: 0 12px 24px; color: var(--text); }
.logo span { color: var(--accent); }
.nav-item { display: flex; align-items: center; gap: 12px; white-space: nowrap; height: 44px; padding: 0 12px; border-radius: 8px; color: var(--text-2); font-size: 15px; text-decoration: none; background: none; border: 0; width: 100%; text-align: left; }
.nav-item:hover { color: var(--text-2); background: var(--accent-tint); }
.nav-item.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.nav-foot .nav-item { white-space: nowrap; font-size: 14px; }
.nav-bar { display: contents; }
.nav-bar .nav-burger { display: none; }
.nav-panel { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-height: 0; overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group > summary { cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .chev { margin-left: auto; transition: transform .15s; }
.nav-group[open] > summary .chev { transform: rotate(180deg); }
.nav-group > summary.active-group { color: var(--ink); font-weight: 600; }
.nav-sub { height: 38px; padding-left: 42px; font-size: 14px; }
.nav-foot { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 12px; }
/* «Do you need help?»: botón en el menú y ventana modal con el contacto del account manager. */
.nav-help { margin-top: 16px; }
.nav-help-btn { cursor: pointer; font: inherit; font-size: 14px; white-space: nowrap; }
/* Icono de 18 px como el resto del menú; el glifo toma --on-accent, que en oscuro mantiene el contraste. */
.help-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.help-dialog { position: fixed; margin: auto; width: min(340px, calc(100vw - 32px)); padding: 12px 16px 16px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; }
.help-dialog::backdrop { background: var(--scrim); }
.help-close { display: block; margin-left: auto; width: 40px; height: 40px; font-size: 22px; line-height: 1; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.help-close:hover { color: var(--text); background: var(--chip); }
.help-body { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.help-photo { border-radius: 50%; flex: none; }
.help-title { font-weight: 600; }
.help-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 40px; padding: 4px 14px 4px 10px; background: var(--chip); border-radius: 16px; color: var(--ink); text-decoration: none; }
.app-main { flex-grow: 1; width: 100%; padding: 28px 40px; display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 1500px; margin-inline: auto; }
/* En portátiles (hasta 1500 px) se gana espacio para las tablas: 16 px menos por lado. Con el menú de 208 px y este relleno, las `rt-N` de ~1020 px caben desde ~1278 px de ancho. */
@media (min-width: 761px) and (max-width: 1500px) { .app-main { padding-inline: 24px; } }
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.page-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.clock { white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 14px; }
.clock svg { color: var(--muted); }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
/* Suplantación («ver como»): selector en la cabecera y banner fijo mientras se ve otra cuenta. */
.impersonate { display: flex; gap: 8px; }
.impersonate input[type="search"] { height: 40px; width: 180px; padding: 0 12px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); color: var(--text-2); font-size: 14px; }
.impersonation-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; background: var(--warn-bg); border: 1px solid var(--warn-tx); border-radius: 8px; font-size: 14px; color: var(--warn-tx); }
.impersonation-banner > span { flex: 1 1 280px; min-width: 0; }
.impersonation-banner .btn { height: 36px; }
@media (max-width: 760px) { .impersonate { flex: 1 1 100%; } .impersonate input[type="search"] { flex-grow: 1; width: auto; min-width: 0; } }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--avatar); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; text-transform: uppercase; }

/* ===== Componentes ===== */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.section { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: flex-end; gap: 12px; }
.section-head > div:first-child { flex-grow: 1; }
.btn { height: 40px; padding: 0 14px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); font-size: 14px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
a.btn { text-decoration: none; }
.btn-primary { border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { filter: brightness(.96); }
.notice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--notice-bg); border: 1px solid var(--notice-bd); border-radius: 8px; font-size: 13px; color: var(--notice-tx); }
.alert { padding: 10px 14px; background: var(--err-bg); border: 1px solid var(--err-bd); border-radius: 8px; font-size: 14px; color: var(--err-tx); }
.empty { padding: 24px; text-align: center; font-size: 14px; color: var(--muted); }
.eyebrow { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* Formularios */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.input { height: 44px; padding: 0 14px; background: var(--card); border: 1px solid var(--input); border-radius: 8px; font: 15px var(--sans); color: var(--text); width: 100%; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-weight: 500; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* Tablas */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.table th.right { text-align: right; }
.table td { padding: 14px 8px; border-bottom: 1px solid var(--line-soft); }

/* ===== Dashboard ===== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Dashboard del manual worker: sus cifras llegan dentro de un <turbo-frame> (en línea por defecto) y son 3 tarjetas. */
turbo-frame#worker-stats { display: flex; flex-direction: column; gap: 20px; }
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.kpis-3 { grid-template-columns: minmax(0, 1fr); } }
.kpi { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.kpi-value { font-family: var(--mono); font-size: 36px; font-weight: 600; letter-spacing: -1px; }
.kpi-foot { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.dash-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; }
/* La tabla «Top ranges» (rt-760) necesita ~810 px de columna: por debajo, la gráfica y la tabla se apilan en vez de dejar la tabla en modo tarjeta. */
@media (max-width: 1480px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* Sin payout visible (ROLE_HIDE_INFO) no hay gráfica: la tabla ocupa todo el ancho y las dos tarjetas de cifras, la mitad. */
.dash-grid.dash-grid-1 { grid-template-columns: minmax(0, 1fr); }
.kpis.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== Login ===== */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 400px) { .auth-card { padding: 24px; } }
.auth-card .logo { padding: 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 1300px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .user-chip span { display: none; }
}
@media (max-width: 760px) {
    .app { flex-direction: column; }
    /* La barra superior es fija (52 px + borde): lo que se desplaza a la vista (el aviso de errores, los enlaces a campos) no debe quedar debajo. */
    html { scroll-padding-top: 68px; }
    /* Barra superior compacta (logo + botón); los enlaces salen en un panel desplegable bajo la barra. */
    .app-nav { width: 100%; height: auto; position: sticky; top: 0; z-index: 20; padding: 0; gap: 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .nav-bar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px 0 16px; }
    .logo { padding: 0; font-size: 20px; }
    .nav-bar .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; }
    .nav-burger .i-close, .app-nav.is-open .nav-burger .i-menu { display: none; }
    .app-nav.is-open .nav-burger .i-close { display: block; }
    .nav-panel { display: none; padding: 8px 12px 12px; border-top: 1px solid var(--line-soft); max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px); }
    .app-nav.is-open .nav-panel { display: flex; }
    .nav-item { height: 46px; }
    .nav-sub { height: 42px; }
    .nav-foot { margin-top: 8px; padding-top: 8px; }
    .app-main { padding: 16px; gap: 16px; }
    /* Cabecera de página: título arriba y, debajo, reloj, tema y usuario en una fila. */
    .page-head { flex-wrap: wrap; gap: 8px; }
    .page-head > div:first-child { flex-basis: 100%; }
    .user-chip { margin-left: auto; }
    .kpis, .kpis.kpis-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Métrica con semáforo (p. ej. SMS limited): rojo si hay, verde si no */
.tone-bad { color: var(--err-tx); }
.tone-ok { color: var(--pos-tx); }
.tone-warn { color: var(--warn-tx); }
.strong { font-weight: 700; }

/* ===== Dashboard: datos ===== */
.seg { display: flex; height: 40px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.seg a { display: flex; align-items: center; border-radius: 6px; padding: 0 14px; color: var(--text-2); font-weight: 500; font-size: 14px; text-decoration: none; }
.seg.seg-tight a { padding: 0 8px; font-size: 13px; white-space: nowrap; }
.seg a.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pos, .neg { font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.pos { background: var(--pos-bg); color: var(--pos-tx); }
.neg { background: var(--err-bg); color: var(--err-tx); }
.chart { display: flex; align-items: flex-end; gap: 12px; height: 320px; border-bottom: 1px solid var(--input); padding-top: 12px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.chart .val { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.chart .bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--bar); min-height: 2px; }
.chart .bar.today { background: var(--accent); }
.chart-labels { display: flex; gap: 12px; }
.chart-labels span { flex: 1; text-align: center; font-size: 12px; color: var(--muted); }
.track { height: 8px; background: var(--line-soft); border-radius: 4px; min-width: 80px; }
.fill { height: 8px; border-radius: 4px; background: var(--accent); }
.tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); margin: 0 6px 4px 0; }

/* ===== Reports ===== */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px 16px; }
select.input { appearance: auto; }
.fields-box { border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 16px; margin: 0; }
.fields-box legend { padding: 0 6px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-actions a.btn { text-decoration: none; }
.table-wrap { overflow-x: auto; }
.table a.sort { color: inherit; text-decoration: none; }
.table a.sort:hover { color: var(--ink); }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; background: var(--soft-card); }
.pager { display: flex; align-items: center; justify-content: space-between; }
.pager .btn { text-decoration: none; margin-left: 6px; white-space: nowrap; }
/* Fechas y horas que no deben partirse en dos líneas dentro de una tabla (Live Traffic, Reports y Access List del manual worker). */
.table td.nowrap { white-space: nowrap; }
/* «Your numbers» del dashboard del manual worker: los números en columnas, que son muchos. */
.numbers-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 156px)); justify-content: start; gap: 4px 16px; }
.numbers-summary { margin: 0; font-size: 14px; color: var(--text-2); }
.numbers-actions { margin-top: 12px; }
.table td.actions .none { display: inline-flex; align-items: center; min-height: 34px; } /* la fila sin botón mide lo mismo que la que lo tiene */
.numbers-list li { padding: 2px 0; }
/* Señuelo anti-bots del formulario público de registro: fuera de pantalla y sin ocupar sitio (una persona no lo ve; no `display:none`, que algunos programas detectan). */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.table td.msg { max-width: 360px; overflow-wrap: anywhere; font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alert-limit { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }

/* ===== Statistics / Live ===== */
.cur-card { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cur-label { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.cur-seg { display: flex; gap: 10px; flex-wrap: wrap; }
.cur-btn { min-width: 150px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--input); background: var(--card); color: var(--text); text-decoration: none; display: block; }
.cur-btn:hover { color: var(--text); border-color: var(--ink); }
.cur-btn .code { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.cur-btn .sym { width: 30px; height: 30px; border-radius: 15px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.cur-btn .n { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.cur-btn.on { border: 2px solid var(--ink); background: var(--accent-tint); padding: 11.5px 15.5px; }
.cur-btn.on .code { color: var(--ink); }
.cur-btn.on .sym { background: var(--accent); color: var(--on-accent); }
.cur-btn .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--accent); display: inline-block; margin-left: auto; }
.explain { display: flex; gap: 14px; padding: 14px 16px; background: var(--notice-bg); border: 1px solid var(--notice-bd); border-radius: 10px; color: var(--notice-tx); font-size: 14px; line-height: 1.5; }
.explain svg { flex-shrink: 0; margin-top: 2px; }
.explain > p { margin: 0; }
/* Aviso que no es una buena noticia (usuarios que no existen, líneas ignoradas, repetidos): con los colores de aviso, no con los de «todo bien». */
.explain.explain-warn { background: var(--warn-bg); border-color: var(--warn-tx); color: var(--warn-tx); }
.explain.explain-stack { flex-direction: column; gap: 8px; } /* aviso con varios bloques (texto, lista, casilla): apilados, no en columnas */
.explain.explain-warn p { margin: 0; }
.explain.explain-warn p + p { margin-top: 8px; }
#stats { display: flex; flex-direction: column; gap: 20px; }
#stats .filters { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.field.grow { flex: 1; min-width: min(220px, 100%); }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.help { font-size: 12px; color: var(--muted); }
#stats .filters .btn { height: 44px; }
#stats .filters > .help { flex: 1 0 100%; margin-top: -4px; }
.more-filters { padding: 12px 20px; }
.more-filters summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); }
.more-filters .filters { margin: 12px 0; }
.table-card { display: flex; flex-direction: column; overflow: hidden; }
.table-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 18px 24px 12px; }
.table-head > div:first-child { flex-grow: 1; }
.live-toggle { font-size: 13px; color: var(--muted); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--accent); display: inline-block; }
.stats-table th { background: var(--th-bg); color: var(--th-tx); font-weight: 700; padding: 14px 8px; border-bottom: 0; white-space: nowrap; }
.stats-table th a.sort { color: inherit; }
.stats-table th a.sort:hover { color: var(--accent); }
.stats-table th:first-child, .stats-table td:first-child { padding-left: 24px; }
.stats-table th:last-child, .stats-table td:last-child { padding-right: 24px; }
/* Con datos reales la tabla mide ~1031 px y a 1280 px la tarjeta, 1022: 6 px de relleno en las columnas intermedias (en vez de 8) devuelven ~24 px y evitan el desplazamiento horizontal. */
.stats-table th:not(:first-child):not(:last-child), .stats-table td:not(:first-child):not(:last-child) { padding-inline: 6px; }
.stats-table td { padding: 11px 8px; vertical-align: top; }
.stats-table tbody tr:hover td { background: var(--row-hover); }
.stats-table .filter-row td { background: var(--filter-bg); padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.col-f { width: 100%; min-width: 64px; height: 32px; border: 1px solid var(--input); border-radius: 6px; background: var(--card); padding: 0 8px; font: 13px var(--sans); color: var(--text); }
.col-f.mono { font-family: var(--mono); }
.col-f:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.col-f.active { border: 1.5px solid var(--ink); font-weight: 600; }
.none { color: var(--muted); }
.stats-table td.msg { max-width: 230px; }
.msg-text { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-text.open { white-space: normal; overflow-wrap: anywhere; }
.more { all: unset; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 600; }
.foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 13px; color: var(--muted); }
.explain-more { margin-top: 6px; font-size: 13px; }
.explain a { color: inherit; font-weight: 600; }
.cur-btn .n { min-height: 1.3em; }

/* My numbers */
.my-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.my-filters .field { flex: 1 1 170px; min-width: 0; }
.my-filters .field.grow { flex: 2 1 220px; }
.my-filters .form-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
.my-filters .btn { height: 44px; }
.btn-sm { height: 34px; padding: 0 10px; font-size: 13px; }
.btn-icon { width: 34px; padding: 0; }
.stats-table td.actions { white-space: nowrap; width: 1%; }
.row-actions { flex: 1 0 100%; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.row-actions form.inline { margin: 0; }
.table form.inline { display: inline; margin: 0; }
.btn:disabled { opacity: .8; cursor: not-allowed; background: var(--chip); }
.btn-primary:disabled { color: var(--muted); } /* sin esto el texto blanco (--on-accent) quedaba casi invisible sobre el gris de --chip */
.col-f.right { text-align: right; }
/* Accesslist: bandera ISO y país juntos (en tarjeta, la celda reparte sus hijos con space-between); filtros alineados con los títulos */
.cell-country { display: inline-flex; align-items: baseline; gap: 6px; }
.cell-country .tag { margin: 0; flex-shrink: 0; }
.stats-table.accesslist .filter-row td { padding-inline: 8px; }
.stats-table.accesslist .more { display: inline-block; padding: 8px 0; } /* zona táctil de «Show more» (con `all: unset` medía 17 px de alto) */
.dl-menu { position: relative; }
.dl-menu > summary { list-style: none; cursor: pointer; }
.dl-menu > summary::-webkit-details-marker { display: none; }
.dl-list { position: absolute; right: 0; top: 46px; z-index: 10; min-width: 300px; padding: 6px; display: flex; flex-direction: column; }
.dl-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text); text-decoration: none; }
.dl-list a:hover { background: var(--row-hover); }
.dl-list .hint { font-size: 12px; }
/* Formularios que tardan (controlador `busy`): el botón desactivado sigue con su color y el cursor de espera, para que parezca «trabajando» y no roto. */
[aria-busy="true"] .btn-primary:disabled { background: var(--accent); color: var(--on-accent); opacity: .75; cursor: progress; }

/* My numbers: botón de descarga y filtros en pantallas estrechas. */
@media (max-width: 760px) {
    .my-filters .field, .my-filters .field.grow { flex-basis: 100%; }
    .my-filters .form-actions { flex: 1 1 100%; flex-wrap: wrap; }
    .my-filters .form-actions > .btn { flex: 0 0 auto; }
    .my-filters .form-actions > .dl-menu { flex: 1 1 auto; }
    .my-filters .dl-menu > summary { width: 100%; }
    .dl-list { right: auto; left: 0; min-width: min(300px, calc(100vw - 32px)); }
}
/* My numbers: en pantallas estrechas el panel de descarga se ancla a la fila de acciones entera (antes, al botón, y se salía por la derecha). */
@media (max-width: 760px) {
    .form-actions-narrow-menu { position: relative; }
    .form-actions-narrow-menu .dl-menu { position: static; }
    .form-actions-narrow-menu .dl-list { left: 0; right: 0; min-width: 0; }
}

/* ===== Tablas responsive (`rt-N`) =====
   Cuando la tarjeta de la tabla mide menos de N px, cada fila pasa a ser una tarjeta (si no, hay que desplazarse en
   horizontal y lo último —acciones, mensaje— queda fuera de pantalla). Se decide por el ancho de la propia tarjeta
   (container query) y no por el de la ventana, para contar el menú lateral. N es el ancho que necesita la tabla, así que
   las del admin (más columnas) pasan antes. Las celdas llevan `data-label`; la celda `.name` es el título de la tarjeta.
   La ordenación (cabecera) pasa a «chips» y los filtros por columna a una rejilla de campos sobre las tarjetas. */
.table-card, .section { container-type: inline-size; }
@container (max-width: 640px) {
    .table.rt-640, .table.rt-640 thead, .table.rt-640 tbody, .table.rt-640 tfoot, .table.rt-640 tr, .table.rt-640 td { display: block; }
    .table.rt-640 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-640 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-640 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-640 thead tr:first-child th { display: none; }
    .table.rt-640 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-640 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-640 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-640 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-640 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-640 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-640 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-640 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-640 .col-f { min-width: 0; }
    .table.rt-640 tbody tr, .table.rt-640 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-640 tfoot tr { background: var(--soft-card); }
    .table.rt-640 tbody td, .table.rt-640 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-640 tbody td::before, .table.rt-640 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-640 tbody td.name, .table.rt-640 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-640 tbody td.name::before, .table.rt-640 tfoot td.name::before, .table.rt-640 td.actions::before, .table.rt-640 td:has(> .empty)::before { content: none; }
    .table.rt-640 tbody td.actions { padding-top: 10px; }
    .table.rt-640 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-640 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-640 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 440px) {
    .table.rt-440, .table.rt-440 thead, .table.rt-440 tbody, .table.rt-440 tfoot, .table.rt-440 tr, .table.rt-440 td { display: block; }
    .table.rt-440 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-440 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-440 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-440 thead tr:first-child th { display: none; }
    .table.rt-440 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-440 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-440 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-440 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-440 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-440 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-440 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-440 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-440 .col-f { min-width: 0; }
    .table.rt-440 tbody tr, .table.rt-440 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-440 tfoot tr { background: var(--soft-card); }
    .table.rt-440 tbody td, .table.rt-440 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-440 tbody td::before, .table.rt-440 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-440 tbody td.name, .table.rt-440 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-440 tbody td.name::before, .table.rt-440 tfoot td.name::before, .table.rt-440 td.actions::before, .table.rt-440 td:has(> .empty)::before { content: none; }
    .table.rt-440 tbody td.actions { padding-top: 10px; }
    .table.rt-440 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-440 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-440 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 510px) {
    .table.rt-510, .table.rt-510 thead, .table.rt-510 tbody, .table.rt-510 tfoot, .table.rt-510 tr, .table.rt-510 td { display: block; }
    .table.rt-510 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-510 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-510 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-510 thead tr:first-child th { display: none; }
    .table.rt-510 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-510 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-510 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-510 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-510 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-510 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-510 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-510 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-510 .col-f { min-width: 0; }
    .table.rt-510 tbody tr, .table.rt-510 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-510 tfoot tr { background: var(--soft-card); }
    .table.rt-510 tbody td, .table.rt-510 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-510 tbody td::before, .table.rt-510 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-510 tbody td.name, .table.rt-510 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-510 tbody td.name::before, .table.rt-510 tfoot td.name::before, .table.rt-510 td.actions::before, .table.rt-510 td:has(> .empty)::before { content: none; }
    .table.rt-510 tbody td.actions { padding-top: 10px; }
    .table.rt-510 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-510 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-510 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 720px) {
    .table.rt-720, .table.rt-720 thead, .table.rt-720 tbody, .table.rt-720 tfoot, .table.rt-720 tr, .table.rt-720 td { display: block; }
    .table.rt-720 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-720 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-720 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-720 thead tr:first-child th { display: none; }
    .table.rt-720 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-720 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-720 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-720 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-720 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-720 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-720 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-720 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-720 .col-f { min-width: 0; }
    .table.rt-720 tbody tr, .table.rt-720 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-720 tfoot tr { background: var(--soft-card); }
    .table.rt-720 tbody td, .table.rt-720 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-720 tbody td::before, .table.rt-720 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-720 tbody td.name, .table.rt-720 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-720 tbody td.name::before, .table.rt-720 tfoot td.name::before, .table.rt-720 td.actions::before, .table.rt-720 td:has(> .empty)::before { content: none; }
    .table.rt-720 tbody td.actions { padding-top: 10px; }
    .table.rt-720 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-720 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-720 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 760px) {
    .table.rt-760, .table.rt-760 thead, .table.rt-760 tbody, .table.rt-760 tfoot, .table.rt-760 tr, .table.rt-760 td { display: block; }
    .table.rt-760 tbody td.cell-empty { display: none; } /* sin dato, la tarjeta no repite «Etiqueta —» (p. ej. Manage sources sin conflicto) */
    .table.rt-760 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-760 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-760 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-760 thead tr:first-child th { display: none; }
    .table.rt-760 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-760 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-760 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-760 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-760 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-760 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-760 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-760 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-760 .col-f { min-width: 0; }
    .table.rt-760 tbody tr, .table.rt-760 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-760 tfoot tr { background: var(--soft-card); }
    .table.rt-760 tbody td, .table.rt-760 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-760 tbody td::before, .table.rt-760 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-760 tbody td.name, .table.rt-760 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-760 tbody td.name::before, .table.rt-760 tfoot td.name::before, .table.rt-760 td.actions::before, .table.rt-760 td:has(> .empty)::before { content: none; }
    .table.rt-760 tbody td.actions { padding-top: 10px; }
    .table.rt-760 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-760 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-760 tbody td:has(> .empty) { display: block; padding: 0; }
    /* Dashboard: la fila vacía es un `<td class="empty">` (no un hijo) y las etiquetas de «Top sources» no caben en una línea a 320 px. */
    .table.rt-760 tbody td.empty { display: block; padding: 0; text-align: center; }
    .table.rt-760 tbody td.empty::before { content: none; }
    .table.rt-760 tbody td:has(> .tag) { flex-wrap: wrap; row-gap: 6px; }
}
@container (max-width: 780px) {
    .table.rt-780, .table.rt-780 thead, .table.rt-780 tbody, .table.rt-780 tfoot, .table.rt-780 tr, .table.rt-780 td { display: block; }
    .table.rt-780 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-780 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-780 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-780 thead tr:first-child th { display: none; }
    .table.rt-780 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-780 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-780 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-780 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-780 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-780 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-780 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-780 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-780 .col-f { min-width: 0; }
    .table.rt-780 tbody tr, .table.rt-780 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-780 tfoot tr { background: var(--soft-card); }
    .table.rt-780 tbody td, .table.rt-780 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-780 tbody td::before, .table.rt-780 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-780 tbody td.name, .table.rt-780 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-780 tbody td.name::before, .table.rt-780 tfoot td.name::before, .table.rt-780 td.actions::before, .table.rt-780 td:has(> .empty)::before { content: none; }
    .table.rt-780 tbody td.actions { padding-top: 10px; }
    .table.rt-780 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-780 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-780 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 800px) {
    .table.rt-800, .table.rt-800 thead, .table.rt-800 tbody, .table.rt-800 tfoot, .table.rt-800 tr, .table.rt-800 td { display: block; }
    .table.rt-800 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-800 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-800 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-800 thead tr:first-child th { display: none; }
    .table.rt-800 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-800 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-800 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-800 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-800 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-800 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-800 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-800 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-800 .col-f { min-width: 0; }
    .table.rt-800 tbody tr, .table.rt-800 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-800 tfoot tr { background: var(--soft-card); }
    .table.rt-800 tbody td, .table.rt-800 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-800 tbody td::before, .table.rt-800 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-800 tbody td.name, .table.rt-800 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-800 tbody td.name::before, .table.rt-800 tfoot td.name::before, .table.rt-800 td.actions::before, .table.rt-800 td:has(> .empty)::before { content: none; }
    .table.rt-800 tbody td.actions { padding-top: 10px; }
    .table.rt-800 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-800 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-800 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 820px) {
    .table.rt-820, .table.rt-820 thead, .table.rt-820 tbody, .table.rt-820 tfoot, .table.rt-820 tr, .table.rt-820 td { display: block; }
    .table.rt-820 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-820 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-820 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-820 thead tr:first-child th { display: none; }
    .table.rt-820 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-820 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-820 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-820 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-820 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-820 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-820 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-820 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-820 .col-f { min-width: 0; }
    .table.rt-820 tbody tr, .table.rt-820 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-820 tfoot tr { background: var(--soft-card); }
    .table.rt-820 tbody td, .table.rt-820 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-820 tbody td::before, .table.rt-820 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-820 tbody td.name, .table.rt-820 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-820 tbody td.name::before, .table.rt-820 tfoot td.name::before, .table.rt-820 td.actions::before, .table.rt-820 td:has(> .empty)::before { content: none; }
    .table.rt-820 tbody td.actions { padding-top: 10px; }
    .table.rt-820 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-820 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-820 tbody td:has(> .empty) { display: block; padding: 0; }
}

@container (max-width: 860px) {
    .table.rt-860, .table.rt-860 thead, .table.rt-860 tbody, .table.rt-860 tfoot, .table.rt-860 tr, .table.rt-860 td { display: block; }
    .table.rt-860 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-860 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-860 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-860 thead tr:first-child th { display: none; }
    .table.rt-860 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-860 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-860 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-860 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-860 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-860 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-860 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-860 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-860 .col-f { min-width: 0; }
    .table.rt-860 tbody tr, .table.rt-860 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-860 tfoot tr { background: var(--soft-card); }
    .table.rt-860 tbody td, .table.rt-860 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-860 tbody td::before, .table.rt-860 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-860 tbody td.name, .table.rt-860 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-860 tbody td.name::before, .table.rt-860 tfoot td.name::before, .table.rt-860 td.actions::before, .table.rt-860 td:has(> .empty)::before { content: none; }
    .table.rt-860 tbody td.actions { padding-top: 10px; }
    .table.rt-860 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-860 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-860 tbody td:has(> .empty) { display: block; padding: 0; }
}

@container (max-width: 920px) {
    .table.rt-920, .table.rt-920 thead, .table.rt-920 tbody, .table.rt-920 tfoot, .table.rt-920 tr, .table.rt-920 td { display: block; }
    .table.rt-920 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-920 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-920 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-920 thead tr:first-child th { display: none; }
    .table.rt-920 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-920 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-920 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-920 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-920 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-920 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-920 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-920 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-920 .col-f { min-width: 0; }
    .table.rt-920 tbody tr, .table.rt-920 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-920 tfoot tr { background: var(--soft-card); }
    .table.rt-920 tbody td, .table.rt-920 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-920 tbody td::before, .table.rt-920 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-920 tbody td.name, .table.rt-920 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-920 tbody td.name::before, .table.rt-920 tfoot td.name::before, .table.rt-920 td.actions::before, .table.rt-920 td:has(> .empty)::before { content: none; }
    .table.rt-920 tbody td.actions { padding-top: 10px; }
    .table.rt-920 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-920 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-920 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 1010px) {
    .table.rt-1010, .table.rt-1010 thead, .table.rt-1010 tbody, .table.rt-1010 tfoot, .table.rt-1010 tr, .table.rt-1010 td { display: block; }
    .table.rt-1010 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1010 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1010 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1010 thead tr:first-child th { display: none; }
    .table.rt-1010 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1010 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1010 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1010 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1010 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1010 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1010 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1010 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1010 .col-f { min-width: 0; }
    .table.rt-1010 tbody tr, .table.rt-1010 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1010 tfoot tr { background: var(--soft-card); }
    .table.rt-1010 tbody td, .table.rt-1010 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1010 tbody td::before, .table.rt-1010 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1010 tbody td.name, .table.rt-1010 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1010 tbody td.name::before, .table.rt-1010 tfoot td.name::before, .table.rt-1010 td.actions::before, .table.rt-1010 td:has(> .empty)::before { content: none; }
    .table.rt-1010 tbody td.actions { padding-top: 10px; }
    .table.rt-1010 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1010 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1010 tbody td:has(> .empty) { display: block; padding: 0; }
}

@container (max-width: 1160px) {
    .table.rt-1160, .table.rt-1160 thead, .table.rt-1160 tbody, .table.rt-1160 tfoot, .table.rt-1160 tr, .table.rt-1160 td { display: block; }
    .table.rt-1160 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1160 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1160 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1160 thead tr:first-child th { display: none; }
    .table.rt-1160 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1160 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1160 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1160 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1160 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1160 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1160 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1160 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1160 .col-f { min-width: 0; }
    .table.rt-1160 tbody tr, .table.rt-1160 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1160 tfoot tr { background: var(--soft-card); }
    .table.rt-1160 tbody td, .table.rt-1160 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1160 tbody td::before, .table.rt-1160 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1160 tbody td.name, .table.rt-1160 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1160 tbody td.name::before, .table.rt-1160 tfoot td.name::before, .table.rt-1160 td.actions::before, .table.rt-1160 td:has(> .empty)::before { content: none; }
    .table.rt-1160 tbody td.actions { padding-top: 10px; }
    .table.rt-1160 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1160 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1160 tbody td:has(> .empty) { display: block; padding: 0; }
}

@container (max-width: 1020px) {
    .table.rt-1020, .table.rt-1020 thead, .table.rt-1020 tbody, .table.rt-1020 tfoot, .table.rt-1020 tr, .table.rt-1020 td { display: block; }
    .table.rt-1020 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1020 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1020 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1020 thead tr:first-child th { display: none; }
    .table.rt-1020 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1020 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1020 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1020 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1020 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1020 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1020 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1020 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1020 .col-f { min-width: 0; }
    .table.rt-1020 tbody tr, .table.rt-1020 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1020 tfoot tr { background: var(--soft-card); }
    .table.rt-1020 tbody td, .table.rt-1020 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1020 tbody td::before, .table.rt-1020 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1020 tbody td.name, .table.rt-1020 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1020 tbody td.name::before, .table.rt-1020 tfoot td.name::before, .table.rt-1020 td.actions::before, .table.rt-1020 td:has(> .empty)::before { content: none; }
    .table.rt-1020 tbody td.actions { padding-top: 10px; }
    .table.rt-1020 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1020 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1020 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 1090px) {
    .table.rt-1090, .table.rt-1090 thead, .table.rt-1090 tbody, .table.rt-1090 tfoot, .table.rt-1090 tr, .table.rt-1090 td { display: block; }
    .table.rt-1090 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1090 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1090 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1090 thead tr:first-child th { display: none; }
    .table.rt-1090 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1090 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1090 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1090 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1090 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1090 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1090 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1090 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1090 .col-f { min-width: 0; }
    .table.rt-1090 tbody tr, .table.rt-1090 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1090 tfoot tr { background: var(--soft-card); }
    .table.rt-1090 tbody td, .table.rt-1090 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1090 tbody td::before, .table.rt-1090 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1090 tbody td.name, .table.rt-1090 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1090 tbody td.name::before, .table.rt-1090 tfoot td.name::before, .table.rt-1090 td.actions::before, .table.rt-1090 td:has(> .empty)::before { content: none; }
    .table.rt-1090 tbody td.actions { padding-top: 10px; }
    .table.rt-1090 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1090 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1090 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 1380px) {
    .table.rt-1380, .table.rt-1380 thead, .table.rt-1380 tbody, .table.rt-1380 tfoot, .table.rt-1380 tr, .table.rt-1380 td { display: block; }
    .table.rt-1380 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1380 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1380 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1380 thead tr:first-child th { display: none; }
    .table.rt-1380 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1380 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1380 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1380 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1380 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1380 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1380 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1380 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1380 .col-f { min-width: 0; }
    .table.rt-1380 tbody tr, .table.rt-1380 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1380 tfoot tr { background: var(--soft-card); }
    .table.rt-1380 tbody td, .table.rt-1380 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1380 tbody td::before, .table.rt-1380 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1380 tbody td.name, .table.rt-1380 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1380 tbody td.name::before, .table.rt-1380 tfoot td.name::before, .table.rt-1380 td.actions::before, .table.rt-1380 td:has(> .empty)::before { content: none; }
    .table.rt-1380 tbody td.actions { padding-top: 10px; }
    .table.rt-1380 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1380 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1380 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 1480px) {
    .table.rt-1480, .table.rt-1480 thead, .table.rt-1480 tbody, .table.rt-1480 tfoot, .table.rt-1480 tr, .table.rt-1480 td { display: block; }
    .table.rt-1480 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1480 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1480 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1480 thead tr:first-child th { display: none; }
    .table.rt-1480 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1480 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1480 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1480 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1480 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1480 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1480 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1480 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1480 .col-f { min-width: 0; }
    .table.rt-1480 tbody tr, .table.rt-1480 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1480 tfoot tr { background: var(--soft-card); }
    .table.rt-1480 tbody td, .table.rt-1480 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1480 tbody td::before, .table.rt-1480 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1480 tbody td.name, .table.rt-1480 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1480 tbody td.name::before, .table.rt-1480 tfoot td.name::before, .table.rt-1480 td.actions::before, .table.rt-1480 td:has(> .empty)::before { content: none; }
    .table.rt-1480 tbody td.actions { padding-top: 10px; }
    .table.rt-1480 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1480 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1480 tbody td:has(> .empty) { display: block; padding: 0; }
}
@container (max-width: 1100px) {
    .table.rt-1100, .table.rt-1100 thead, .table.rt-1100 tbody, .table.rt-1100 tfoot, .table.rt-1100 tr, .table.rt-1100 td { display: block; }
    .table.rt-1100 thead tr:first-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; align-items: stretch; padding: 12px 16px 14px; background: var(--th-bg); }
    .table.rt-1100 thead tr:first-child::before { content: 'Sort by'; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--th-tx); }
    .table.rt-1100 thead tr:first-child:not(:has(a.sort)) { display: none; }
    .table.rt-1100 thead tr:first-child th { display: none; }
    .table.rt-1100 thead tr:first-child th:has(a.sort) { display: flex; padding: 0; background: none; }
    .table.rt-1100 thead a.sort { display: block; flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--input); border-radius: 999px; background: var(--card); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .table.rt-1100 thead th[aria-sort] a.sort { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
    .table.rt-1100 thead tr.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; padding: 12px 16px; background: var(--filter-bg); border-bottom: 1px solid var(--line); }
    .table.rt-1100 thead tr.filter-row td { padding: 0; border: 0; background: none; }
    .table.rt-1100 thead tr.filter-row td:not(:has(input)) { display: none; }
    .table.rt-1100 thead tr.filter-row::before { content: 'Filter'; grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
    .table.rt-1100 thead tr.filter-row:not(:has(input)) { display: none; }
    .table.rt-1100 .col-f { min-width: 0; }
    .table.rt-1100 tbody tr, .table.rt-1100 tfoot tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .table.rt-1100 tfoot tr { background: var(--soft-card); }
    .table.rt-1100 tbody td, .table.rt-1100 tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; width: auto; max-width: none; border: 0; text-align: right; background: none; }
    .table.rt-1100 tbody td::before, .table.rt-1100 tfoot td::before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
    .table.rt-1100 tbody td.name, .table.rt-1100 tfoot td.name { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; text-align: left; }
    .table.rt-1100 tbody td.name::before, .table.rt-1100 tfoot td.name::before, .table.rt-1100 td.actions::before, .table.rt-1100 td:has(> .empty)::before { content: none; }
    .table.rt-1100 tbody td.actions { padding-top: 10px; }
    .table.rt-1100 tbody td.msg { flex-direction: column; align-items: stretch; text-align: left; }
    .table.rt-1100 .msg-text { white-space: normal; overflow-wrap: anywhere; }
    .table.rt-1100 tbody td:has(> .empty) { display: block; padding: 0; }
}
.app-main.wide { max-width: 1800px; }

/* Selector de moneda (Reports y Statistics) en pantallas estrechas: los botones ocupan todo el ancho. */
@media (max-width: 760px) {
    .cur-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .cur-btn { min-width: 0; padding: 10px 8px; }
    .cur-btn.on { padding: 9.5px 7.5px; }
    .cur-btn .code { font-size: 17px; gap: 6px; }
    .cur-btn .sym { width: 24px; height: 24px; font-size: 13px; }
}
@media (max-width: 480px) {
    .cur-seg { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Test (Premium SMS y Call) ===== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { display: flex; gap: 12px; padding: 16px 20px; align-items: flex-start; border-left: 1px solid var(--line); }
.steps li:first-child { border-left: 0; }
.steps .n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.steps div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.steps div b:first-child { font-size: 15px; color: var(--text); }
.view-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.view-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
.view-card:hover { border-color: var(--input); }
.view-card.on { border: 2px solid var(--accent); padding: 13px 17px; background: var(--accent-tint); }
.view-card.on .top b { color: var(--ink); }
.view-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.view-card .top b { font-size: 16px; }
.view-card .top .mono { font-size: 12px; color: var(--muted); }
.view-card .sub { margin: 0; font-size: 13px; }
.test-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.test-filter .field { margin: 0; }
.test-filter .grow { flex: 1 1 280px; max-width: 520px; }
.test-filter .more-filters { flex: 1 0 100%; }
.test-head { flex-wrap: wrap; align-items: flex-end; position: relative; }
/* El menú de descarga se ancla a la cabecera de la tarjeta (no al botón) para no salirse de la pantalla en anchos bajos. */
.test-head .dl-menu { position: static; }
.test-head .dl-list { left: auto; right: 24px; top: calc(100% - 8px); min-width: 0; width: min(320px, calc(100% - 48px)); }
@media (max-width: 760px) { .test-head .dl-list { right: 16px; width: calc(100% - 32px); } }
.test-head > div:first-child { flex: 1 1 240px; min-width: 0; }
.test-head h2 { margin: 0; }
.test-head .hint { margin: 2px 0 0; }
.range-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.range-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.range-field .input { height: 40px; width: auto; font-weight: 400; }
.range-field .input:disabled { opacity: .6; }
.range-lock { align-self: flex-end; max-width: 180px; line-height: 1.3; margin: 0 0 2px; }
.stats-table td.time .date { color: var(--muted); font-weight: 400; margin-right: 6px; }
.test-public { margin: 0 24px 12px; }
.sender { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); font-weight: 600; }
.test-table td { overflow-wrap: anywhere; }
.test-table td.actions { text-align: right; justify-content: flex-end; }
.test-table td.mono, .test-table td.time { overflow-wrap: normal; }
.stats-table td.time { font-weight: 600; color: var(--text); white-space: nowrap; }
.test-numbers td.name .sub { display: block; margin: 2px 0 0; font-size: 12px; font-weight: 400; }
.test-numbers td.rank { color: var(--muted); font-weight: 600; }
.trend { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.trend i { display: block; width: 7px; background: var(--bar); border-radius: 2px; }
.trend i.last { background: var(--accent); }
.test-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.test-grid:has(> .table-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.test-aside { display: flex; flex-direction: column; gap: 16px; }
.test-aside p { margin: 0; font-size: 14px; color: var(--text-2); }
.suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft-card); }
/* En la tabla de números, el rango, la posición y la tendencia solo salen en la primera fila de cada rango
   (en modo tarjeta, por debajo de rt-640, cada fila los lleva). */
@container (min-width: 641px) {
    .test-numbers td.rep > * { visibility: hidden; }
    .test-numbers td.rep.rank { color: transparent; }
}
@media (max-width: 900px) {
    .steps, .view-cards, .view-cards.two, .test-grid { grid-template-columns: minmax(0, 1fr); }
    .steps li { border-left: 0; border-top: 1px solid var(--line); }
    .steps li:first-child { border-top: 0; }
}

/* ===== Finance (Account details e Invoices; ver docs/migracion/14-finance.md) ===== */
.fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.fin-col { display: flex; flex-direction: column; gap: 24px; }
.fin-card h2 { margin: 0; padding: 18px 24px; font-size: 18px; border-bottom: 1px solid var(--line-soft); }
.fin-card dl { margin: 0; padding: 4px 24px 12px; }
.fin-card .kv { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.fin-card .kv:last-child { border-bottom: 0; }
.fin-card dt { color: var(--text-2); }
.fin-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fin-card dd.empty-value { color: var(--muted); }
.fin-card .copy-link { margin-left: 8px; padding: 0; border: 0; background: none; font: 600 12px var(--sans); color: var(--ink); cursor: pointer; }
.fin-card .copy-link:disabled { opacity: 1; background: none; color: var(--muted); }
.fin-form { padding: 20px 24px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.fin-form .span-2 { grid-column: 1 / -1; }
.fin-form .req { color: var(--err-tx); }
.fin-form .help { margin: 0; }
.fin-form-foot { padding: 0 24px 24px; }
.fin-errors { margin: 0 0 16px; padding-left: 20px; }
.status { white-space: nowrap; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--chip); color: var(--text-2); }
.status-paid { background: var(--pos-bg); color: var(--pos-tx); }
.status-pending { background: var(--warn-bg); color: var(--warn-tx); }
.status-bad { background: var(--err-bg); color: var(--err-tx); }
.status-hold { background: var(--chip); color: var(--muted); }
.table tr.muted-row td { color: var(--muted); }
.smpp { padding: 14px 18px; margin-bottom: 16px; max-width: 560px; }
.smpp-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.smpp-track { height: 12px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); overflow: hidden; }
.smpp-fill { height: 100%; }
.smpp-ok { background: var(--pos-tx); }
.smpp-warn { background: var(--warn-tx); }
.smpp-bad { background: var(--err-tx); }
.smpp-warning { margin: 10px 0 0; color: var(--err-tx); }
.fin-status-filter { display: flex; flex-direction: column; gap: 6px; }
.fin-status-filter .seg { height: 44px; }
.fin-status-filter .seg a { height: 100%; }
.fin-pending { align-items: center; margin-bottom: 20px; }
.fin-edit { display: flex; align-items: center; gap: 6px; margin: 0; }
.fin-edit select.input { height: 34px; width: auto; padding: 0 8px; font-size: 13px; }
.fin-saved { margin: 0; }
.fin-saved label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
@media (max-width: 900px) {
    .fin-grid, .fin-form { grid-template-columns: minmax(0, 1fr); }
    .fin-card .kv { grid-template-columns: 1fr; gap: 4px; }
}
.api-pdf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 16px 24px; font-size: 15px; }
.api-pdf span { color: var(--text-2); margin-left: 6px; }
.api-pdf .btn { text-decoration: none; }
.api-nokey { margin: 12px 0; font-size: 15px; font-weight: 500; border-width: 2px; }
.api-nokey strong { font-weight: 700; }
.api-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.api-grid .api-wide { grid-column: 1 / -1; }
.api-body { padding: 18px 24px 20px; font-size: 15px; line-height: 1.5; }
.api-body p { margin: 0 0 10px; }
.api-url, .api-code { display: block; padding: 12px 14px; background: var(--chip); border: 1px solid var(--line); border-radius: 8px; font: 13px/1.5 var(--mono); color: var(--text); overflow-wrap: break-word; white-space: pre-wrap; }
.api-code { margin: 0 0 14px; }
.api-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.api-note { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.api-foot { margin-top: 20px; }
.fin-card dl.api-params { margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; }
.api-params dt, .api-params dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.api-body code:not(.api-url) { overflow-wrap: anywhere; font-family: var(--mono); font-size: 13px; }
@media (max-width: 900px) {
    .api-grid { grid-template-columns: minmax(0, 1fr); }
    .fin-card dl.api-params { grid-template-columns: 1fr; gap: 2px; }
    .api-params dd { margin-bottom: 8px; }
}
.fin-table td { vertical-align: middle; }
.fin-table td.mono { white-space: nowrap; }
.my-filters .field.check { flex: 0 0 auto; align-self: end; justify-content: center; height: 44px; }

/* ===== Manage numbers: acciones masivas (ver docs/migracion/16-manage-numbers.md) ===== */
.tools-title { margin: 28px 0 8px; }
.tools { overflow: hidden; }
.tool + .tool { border-top: 1px solid var(--line); }
.tool > summary { display: flex; align-items: center; gap: 4px 16px; padding: 16px 20px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary:hover { background: var(--soft-card); }
.tool > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.tool[open] > summary::after { transform: rotate(-135deg); }
.tool-title { font-weight: 600; color: var(--ink); }
.tool-sub { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
    .tool > summary { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; }
    .tool > summary .tool-title, .tool > summary .tool-sub { grid-column: 1; }
    .tool > summary::after { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }
}
/* Con `wrap="off"` las filas largas se desplazan hacia un lado: en pantallas estrechas se avisa. */
.hint-narrow { display: none; }
@media (max-width: 485px) { .hint-narrow { display: block; } }
.tool-body { padding: 4px 20px 20px; }
.tool-body .my-filters .btn:disabled { height: 44px; }
.tool-note { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; }
.tool-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.btn-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
a.btn-link { text-decoration: none; }
.btn-link-danger { color: var(--err-tx); }
.row-actions { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 4px; font-size: 13px; }
.row-actions .hint { font-size: 12px; }
/* Sin saltos entre «Edit», «Hold» y «Delete»: en la columna Name, estrecha, «Delete» bajaba a otra línea y las filas quedaban de alturas distintas. */
.row-actions.nowrap { flex-wrap: nowrap; }
/* En «Manage numbers» las acciones van bajo el nombre y alineadas con él (en tabla y en tarjeta), sin el hueco que dejaba el `gap` de la tarjeta. */
.table tbody td.name > .row-actions { justify-content: flex-start; margin-top: 0; padding-left: 24px; /* casilla (16 px) + separación (8 px): bajo el texto del nombre */ }
.table tbody td.name > .row-actions.flush { padding-left: 0; } /* sin casilla delante (lista de conflictos): bajo el nombre, sin sangría */
.table tbody td.name:has(> .row-actions) { row-gap: 0; }
.btn-danger { border-color: var(--danger); background: var(--danger); color: var(--on-danger); font-weight: 600; }
.btn-danger:hover { border-color: var(--danger-hover); background: var(--danger-hover); }
/* Errores de un formulario: el aviso recibe el foco y cada campo con error se marca (no solo por el color: lleva `aria-invalid`). */
.alert > .fin-errors:last-child { margin-bottom: 0; }
.pw-card { max-width: 480px; }
.alert:focus { outline: 2px solid var(--danger); outline-offset: 2px; }
.alert .fin-errors a { color: inherit; text-decoration: underline; }
.input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
/* El mensaje del error junto a su campo (lo referencia `aria-describedby`): no solo el color, también el texto. */
.field-error { font-size: 13px; font-weight: 600; color: var(--err-tx); }
.field-error + .hint { margin-top: 2px; }
.card.is-invalid-section { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
h2[tabindex="-1"]:focus { outline: none; }
.confirm { padding: 20px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.confirm-title { margin: 0; font-size: 18px; color: var(--ink); overflow-wrap: anywhere; }
.confirm-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.confirm-list dt { font-size: 12px; color: var(--muted); }
.confirm-list dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.confirm-list dd.mono { white-space: nowrap; }
/* Nota bajo el valor (p. ej. «first of the list»): en su propia línea, que si no el `nowrap` del número la empuja encima de la columna siguiente. */
.confirm-list dd .hint { display: block; margin-top: 2px; font-weight: 400; white-space: normal; }
.field label .opt { font-weight: 400; color: var(--muted); margin-left: 4px; }
.table .nowrap, .impact .nowrap { white-space: nowrap; }
.status-cell { display: inline-flex; align-items: center; gap: 8px; }
.table .status-cell form.inline { display: inline-flex; }
/* El interruptor se ve de 34×20 pero el botón mide 46×32 (borde transparente, que también es zona de clic) y el margen negativo mantiene el hueco de antes: objetivo táctil de 32 px. */
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 32px; margin: -6px; padding: 0; border: 6px solid transparent; border-radius: 999px; background: var(--input); background-clip: padding-box; cursor: pointer; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch[aria-checked="true"] { background-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.state { font-size: 13px; font-weight: 600; white-space: nowrap; }
.state-on { color: var(--pos-tx); }
.state-off { color: var(--err-tx); }

/* Alta de un rango (Manage numbers): formulario por secciones, fuentes de usuario y lo que se llevaría a otros rangos. */
.form-card h2 { margin: 0; padding: 18px 24px; font-size: 18px; border-bottom: 1px solid var(--line-soft); }
form .form-card { margin-bottom: 24px; }
.confirm.confirm-wide { max-width: none; }
.form-grid { padding: 20px 24px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid > .hint.span-2 { margin: -8px 0 0; }
.form-grid .req { color: var(--err-tx); }
.form-grid textarea.input { height: auto; padding: 10px 14px; line-height: 1.45; resize: vertical; }
.form-note { margin: 0; padding: 14px 24px 18px; }
/* Texto de ayuda de una tarjeta (varios párrafos seguidos, p. ej. las columnas de la carga de series): un solo bloque con el relleno de la tarjeta y un hueco corto entre párrafos. */
.form-help { display: grid; gap: 12px; padding: 20px 24px 24px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.form-help p { margin: 0; }
.form-help b { color: var(--text); }
.form-help .btn { justify-self: start; margin-top: 4px; }
.form-help .stat-figure { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.form-help .stat-figure small { font-size: 14px; font-weight: 400; color: var(--text-2); }
.confirm .form-note { padding: 0; }
.src-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(160px, 2fr) repeat(3, minmax(72px, .7fr)) auto auto; gap: 12px; align-items: end; padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.form-bottom { margin-bottom: 24px; }
.form-bottom .alert { margin-bottom: 16px; }
/* La casilla de una confirmación irreversible (p. ej. borrar resultados de test) es un objetivo táctil de verdad. */
.alert .check { min-height: 40px; margin-top: 6px; }
/* Borrar un rango en hold: más llamativo que el aviso de rangos que se borran (borde grueso en el color de peligro, título grande). */
.alert-held { margin: 16px 0; padding: 14px 24px; border-width: 2px; border-color: var(--danger); }
.alert-held > :last-child, .explain .fin-errors:last-child { margin-bottom: 0; }
.alert-held .held-title { margin: 0 0 6px; font-size: 17px; }
.alert-held p { margin: 8px 0 0; }
.alert-held .fin-errors { margin: 6px 0 0; }
.alert .check input { width: 20px; height: 20px; flex: none; }
.impact { list-style: none; margin: 0; padding: 4px 24px 12px; }
.impact li { padding: 12px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.impact li:first-child { border-top: 0; }
.tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 600; color: var(--text-2); }
.tag-danger { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err-tx); }
@media (max-width: 760px) {
    .form-grid { grid-template-columns: 1fr; padding: 16px; }
    .form-card h2, .form-note, .impact { padding-left: 16px; padding-right: 16px; }
    .form-help { padding: 16px; }
    .alert-held { padding-left: 16px; padding-right: 16px; }
    .src-row { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
}

/* Foco de teclado visible en todo lo interactivo (`:where` no sube la especificidad: los estilos propios de .input y .col-f siguen mandando). */
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Títulos de tarjeta que no dejan una palabra suelta en la última línea. */
h1, h2, h3 { text-wrap: balance; }

/* Objetivos táctiles de al menos 40 px en pantallas estrechas (chips de orden, «More filters», enlaces de fila, «Copy», paginación). */
@media (max-width: 800px) {
    .table thead a.sort { display: inline-flex; align-items: center; min-height: 36px; }
    .more-filters summary { padding-block: 13px; }
    .table td.actions a { display: inline-flex; align-items: center; min-height: 40px; }
    .table td.actions .btn-sm, .numbers-actions .btn-sm { height: 40px; }
    .fin-card .copy-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; }
    .pager .btn { min-width: 40px; min-height: 40px; }
    .row-actions .btn-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 8px; }
    .table td .btn-link { min-height: 40px; padding: 0 8px; } /* botones de acción dentro de una celda («Solve» de Manage sources) */
    .filters .check { min-height: 40px; }
    .row-actions.flush .btn-link { margin-left: -8px; } /* el relleno táctil sangraba «View» respecto al título (lista de conflictos) */
}

.fin-card.form-narrow { max-width: 720px; } /* formularios cortos: en pantallas anchas el campo no se estira a 1.400 px */

/* Cifras alineadas: las columnas numéricas usan cifras de ancho fijo (las `.mono` ya lo son). */
.table td.right, .table th.right { font-variant-numeric: tabular-nums; }

/* Input de fichero con el estilo de los botones del panel (el botón nativo desentona, sobre todo en oscuro). */
input[type="file"].input { padding: 6px 8px; }
input[type="file"].input::file-selector-button { margin-right: 12px; padding: 6px 12px; border: 1px solid var(--input); border-radius: 6px; background: var(--card); color: var(--text); font: 600 13px var(--sans); cursor: pointer; }
input[type="file"].input::file-selector-button:hover { background: var(--row-hover); }

/* Los interruptores miden 34×20 px: la zona de pulsación se amplía sin cambiar su aspecto. */
.switch::before { content: ''; position: absolute; inset: -12px -6px; }

/* Dashboard: sin ingresos en 7 días la gráfica se sustituye por un mensaje en vez de dejar una caja vacía. */
.empty-chart { margin-top: 12px; padding: 36px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }

/* Avisos explicativos en móvil: texto algo más pequeño y menos relleno, sin bajar de 13 px (12 px los enlaces «more»), para que ocupen menos sin perder ningún texto. */
@media (max-width: 640px) {
    .explain { gap: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
    .explain svg { width: 16px; height: 16px; }
    .explain-more { margin-top: 4px; font-size: 12px; }
    /* Selector de moneda: los botones van en fila (hasta 3 por línea) con el mismo texto, también por debajo de 480 px, donde antes iban de uno en uno. */
    .cur-card { padding: 14px 16px; gap: 12px; }
    .cur-seg { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
    .cur-btn { min-width: 0; padding: 9px 8px; border-radius: 10px; }
    .cur-btn.on { padding: 8.5px 7.5px; }
    .cur-btn .code { gap: 6px; font-size: 16px; }
    .cur-btn .sym { width: 24px; height: 24px; border-radius: 12px; font-size: 13px; }
    .cur-btn .n { margin-top: 2px; font-size: 12px; line-height: 1.3; }
}

/* Páginas de error (403, 404, 5xx): como el login, con el código en pequeño sobre el título. */
.error-card { gap: 12px; }
.error-code { margin: 4px 0 0; font: 600 13px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.error-card h1 { margin: 0; }
.error-card .sub { margin: 0; }
.error-card .form-actions { margin-top: 8px; }

/* My numbers: «Test it» y la descarga van en la misma línea (antes se apilaban y cada fila medía ~97 px). */
.table td.actions .row-actions { flex-wrap: nowrap; }


/* Source ideas: «Top» como tarjetas grandes; «Interesting» agrupado por letra, con índice A–Z y buscador (source-search_controller.js). */
.ideas-section { margin-top: 28px; }
.ideas-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 20px; }
.ideas-title .tag { margin-left: 0; flex: none; }
.ideas-sub { margin: -8px 0 16px; font-size: 14px; color: var(--muted); }
/* «Top»: el mismo chip que «Interesting», pero en un panel de acento y con chips más grandes y en negrita, para que se lea como lo más importante. */
.ideas-section.is-top { padding: 20px 24px 26px; background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 14px; }
.ideas-section.is-top .ideas-title { color: var(--ink); }
.ideas-star { flex: none; color: var(--accent); }
.ideas-section.is-top .idea-letter h3 { border-bottom-color: var(--accent-soft); color: var(--ink); }
.idea.idea-top { min-height: 44px; padding: 9px 20px; border-color: var(--accent); font-size: 16px; font-weight: 600; color: var(--ink); }
.idea.idea-top:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) { .ideas-section.is-top { padding: 16px 16px 20px; } }
.ideas-index { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.ideas-index a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: 8px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ideas-index a:hover { background: var(--accent-soft); }
@media (min-width: 761px) { .ideas-index { position: sticky; top: 8px; z-index: 5; } }
.idea-letter { margin-top: 22px; scroll-margin-top: 64px; }
/* El índice fijo (hasta 3 filas) no debe tapar la letra al saltar por ancla. */
@media (min-width: 761px) { .idea-letter { scroll-margin-top: 150px; } }
.idea-letter h3 { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: .5px; color: var(--muted); }
.ideas-list { display: flex; flex-wrap: wrap; gap: 10px; }
.idea { max-width: 100%; overflow-wrap: anywhere; min-width: 76px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.idea:hover:not(:disabled) { border-color: var(--accent); }
.idea:disabled { color: var(--muted); cursor: default; }
/* Letra con muchos nombres: plegada muestra solo los primeros; buscando se ve todo y el botón desaparece. */
.ideas-root:not(.is-searching) .idea-letter.is-folded .idea-extra { display: none; }
.is-searching .idea-more { display: none; }
.idea-more { margin-top: 12px; }
.idea[hidden], .idea-letter[hidden], .ideas-section[hidden], .ideas-index[hidden], .explain[hidden] { display: none; }
/* Live source traffic: la fecha no se parte; en tarjeta el enlace del nombre es un objetivo táctil de 32 px. */
.live-traffic td.nowrap { white-space: nowrap; }
.live-traffic td.when { font-variant-numeric: tabular-nums; }
.live-traffic .when-date { color: var(--muted); }
.live-alert { overflow-wrap: anywhere; }
.live-title { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 18px; }
.live-title .tag { margin-left: 0; }
@container (max-width: 640px) { .table.rt-640.live-traffic td.name a { display: inline-block; padding-block: 6px; } }

/* ===== Manage limits (grupos de límites de Premium SMS; ver docs/migracion/19-manage-limits.md) ===== */
.limit-group { margin-bottom: 14px; overflow: hidden; }
.limit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 14px 16px; }
.limit-head h2 { margin: 0; font-size: 16px; flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.limit-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.limit-facts dt { font-size: 12px; color: var(--muted); }
.limit-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--text-2); }
.limit-body { border-top: 1px solid var(--line); }
/* Cada <details> es su propio contenedor para que sus tablas `rt-440` pasen a tarjeta según su ancho (no hay `.table-card` por encima). */
.limit-body details { container-type: inline-size; }
.limit-body details + details { border-top: 1px solid var(--line); }
.limit-body summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.limit-body summary:hover { background: var(--row-hover); }
.limit-body summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.limit-body details > .hint { margin: 0; padding: 0 16px 12px; }
.limit-body tbody tr:last-child td { border-bottom: 0; }
.limit-sub { background: var(--filter-bg); box-shadow: inset 3px 0 0 var(--line); }
.limit-sub td { background: var(--filter-bg); }
.limit-sub .status-hold { background: var(--card); }
.limit-day .field { flex: 0 0 auto; }
.limit-note-text { overflow-wrap: anywhere; }
.limit-head .row-actions { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; }
.limit-head .row-actions .btn-link { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 12px; }
@media (max-width: 480px) { .limit-facts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } }
@media (max-width: 360px) { .limit-head { column-gap: 12px; } .limit-head h2 { flex-basis: 5rem; } }
.limit-row > .btn { min-height: 44px; }
.limit-row { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(150px, 2fr) repeat(2, minmax(90px, 1fr)) auto; gap: 12px; align-items: end; padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.limit-ranges { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding: 4px 0; }
.limit-note-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px 24px; border-top: 1px solid var(--line); }
.limit-note-form .field { flex: 1 1 200px; min-width: 0; }
.limit-note-form .field.grow { flex: 3 1 280px; }
@container (max-width: 440px) { .limit-note-form { padding: 16px; } }
/* El formulario del grupo y sus tarjetas son contenedores: la fila de usuario se apila según el ancho de su tarjeta (con el menú lateral, a 800 px de ventana solo quedan ~520 px útiles). */
.limit-form { max-width: 960px; }
.limit-form .form-card { container-type: inline-size; }
@container (max-width: 700px) {
    .limit-row { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
    .limit-row > .field:nth-child(-n+2), .limit-row > .btn { grid-column: 1 / -1; }
}

/* Pie (T&C, Privacy Policy, © iKangoo) y páginas legales. */
.app-foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 20px; font-size: 12px; color: var(--muted); text-align: center; }
.app-foot a { color: var(--ink); display: inline-flex; align-items: center; min-height: 32px; }
.app-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) { .app-foot a { min-height: 40px; padding: 0 8px; } }
.legal { max-width: 760px; padding: 24px 28px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.legal-h1 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--text); }
.legal-h2 { margin: 24px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.legal-p { margin: 0 0 8px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .legal { padding: 16px; } }
/* IPRN SMS Queue (templates/sms_queue): el contador ocupa el ancho de la página (en Manage numbers, la barra SMPP sigue a 560 px), la acción destructiva va
   separada a la derecha y la celda de acción no se parte ni queda más baja que su fila. */
.sms-queue .smpp { max-width: none; }
.sms-queue .queue-actions .form-actions { flex: 1; }
.sms-queue .queue-actions .danger-action { margin-inline-start: auto; }
.sms-queue .queue-actions .btn { white-space: nowrap; }
.sms-queue .queue-actions > .hint { flex: 1 1 100%; } /* el texto de ayuda va en su línea: a 1920 px compartía fila y partía los botones */
.sms-queue .table td { vertical-align: middle; }
.sms-queue .table td.actions .btn-link { white-space: nowrap; }
/* Separación entre «Entries on queue» (alineada a la derecha) y «Action»; solo en modo tabla (en tarjeta, la acción ya va en su línea). */
@container (min-width: 511px) {
    .sms-queue .table th.actions, .sms-queue .table td.actions { padding-left: 40px; }
}

/* SMPP Alerts (templates/smpp_alerts): resumen en tres tarjetas (la de memoria, más ancha, con medidor y marcas en el 50 y el 80 %), filtros en una fila
   (periodo + búsqueda) y la lista. Los tonos salen de los tokens del tema, así que el modo oscuro no necesita reglas propias. */
.smpp-alerts { display: flex; flex-direction: column; gap: 16px; }
.smpp-kpis { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 16px; }
.smpp-kpis .kpi-value small { font-size: 22px; margin-left: 2px; color: var(--muted); font-weight: 500; }
.smpp-kpis .kpi-foot { flex-wrap: wrap; }
.smpp-muted { color: var(--muted); }
.smpp-ago { font-family: var(--sans); font-size: 30px; letter-spacing: -.5px; }
.smpp-gauge { position: relative; height: 12px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); overflow: hidden; }
.smpp-gauge .smpp-fill { border-radius: 6px 0 0 6px; transition: width .4s ease; }
.smpp-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--card); opacity: .9; }
.smpp-clear { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pos-tx); }
.smpp-updated { margin: 8px 0 0; }
.smpp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.smpp-filters .seg { height: 44px; }
.smpp-filters .seg a { gap: 8px; white-space: nowrap; }
.seg-count { font-family: var(--mono); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--text-2); }
.seg a.on .seg-count { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: inherit; }
.smpp-search { display: flex; gap: 8px; flex: 0 1 640px; min-width: min(320px, 100%); }
.smpp-search .input { flex: 1; min-width: 0; }
.smpp-search .btn { height: 44px; white-space: nowrap; }
.smpp-table td { vertical-align: middle; }
.smpp-table td.time { font-family: var(--mono); font-size: 13px; }
.smpp-when { display: block; }
.smpp-ago-line { display: block; margin-top: 2px; font-family: var(--sans); font-size: 12px; font-weight: 500; }
.smpp-table tr.smpp-p1 td:first-child { box-shadow: inset 3px 0 0 var(--err-tx); } /* lo urgente se ve de un vistazo (prioridad 1) */
.smpp-kpis .btn-link { display: inline-flex; align-items: center; min-height: 40px; }
.smpp-alerts .foot { flex-wrap: wrap; gap: 10px 16px; }
.smpp-priority { font-family: var(--mono); min-width: 34px; text-align: center; }
.smpp-type { white-space: nowrap; }
.stats-table td.smpp-msg { max-width: none; min-width: 260px; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.smpp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 24px; }
.smpp-empty svg { color: var(--pos-tx); }
@media (max-width: 1300px) {
    .smpp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smpp-kpi-memory { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .smpp-kpis { grid-template-columns: minmax(0, 1fr); }
    .smpp-filters .seg { width: 100%; }
    .smpp-filters .seg a { flex: 1; justify-content: center; }
    .smpp-search { flex-basis: 100%; }
    .smpp-alerts .pager { width: 100%; }
    .smpp-alerts .pager > span { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .smpp-alerts .pager .btn { margin-left: 0; min-height: 40px; }
}
/* En tarjeta, la fila P1 lleva el borde en la propia tarjeta. */
@container (max-width: 760px) { .smpp-table tr.smpp-p1 { box-shadow: inset 3px 0 0 var(--err-tx); } .smpp-table tr.smpp-p1 td:first-child { box-shadow: none; } }