/* Fuentes locales en fonts/ (mismas que Panel Admin): Onest = texto, Michroma = marca, Fragment Mono = código/datos.
     Se cargan desde la carpeta fonts/ junto a este HTML (deben viajar juntos). */
  @font-face { font-family:'Onest'; font-weight:100 900; font-style:normal; font-display:swap;
    src: local('Onest'), url('fonts/Onest-Variable.woff2') format('woff2'); }
  @font-face { font-family:'Michroma'; font-weight:400; font-style:normal; font-display:swap;
    src: local('Michroma'), url('fonts/Michroma-Regular.woff2') format('woff2'); }
  @font-face { font-family:'Fragment Mono'; font-weight:400; font-style:normal; font-display:swap;
    src: local('Fragment Mono'), url('fonts/FragmentMono-Regular.woff2') format('woff2'); }

  :root {
    --bg: #161a20;
    --bg-elevated: #1b2029;
    --card: #1e232b;
    --card2: #252b34;
    --border: #2c3340;
    --border-strong: #3c4454;
    --text: #eef1f4;
    --muted: #8c96a3;
    --muted-strong: #b7bec9;
    --primary: #0f5132;
    --primary-strong: #0c4128;
    --primary-ink: #eafff2;
    --primary-soft: rgba(15,81,50,.18);
    --link: #6ea8fe;
    --positive: #3ecf83;
    --positive-soft: rgba(62,207,131,.14);
    --danger: #ff6b57;
    --danger-soft: rgba(255,107,87,.14);
    --live: #ff9d82;
    --live-soft: rgba(255,111,74,.15);
    --amber: #e8b34c;
    --amber-soft: rgba(232,179,76,.14);
    --info: #6ea8fe;
    --info-soft: rgba(110,168,254,.14);
    --input-bg: #12151b;
    --brand-cyan: #2fd0c8;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 26px rgba(0,0,0,.35);
    --focus-ring: 0 0 0 3px rgba(62,207,131,.35);
    --font-display: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-accent: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-brand: 'Michroma', 'Onest', ui-sans-serif, system-ui, sans-serif;
    --mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --kanji: 'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo','Noto Sans CJK JP','Microsoft YaHei',sans-serif;
    --ease: cubic-bezier(.22,1,.36,1);
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }

  a { color: var(--link); text-decoration: none; }
  a:hover { text-decoration: underline; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
  }

  /* ============ LOGO ============ */
  .logo { display: flex; align-items: center; gap: 11px; }
  .logo-mark {
    width: 44px; height: 44px; border-radius: 11px;
    background: #0f5132;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .logo-word { font-family: var(--font-brand); font-size: 15px; letter-spacing: 0; white-space: nowrap; font-weight: 400; }
  .logo-word .sk { color: var(--text); }
  .logo-word .bet { color: var(--brand-cyan); }
  .logo-mark-lg { width: 64px; height: 64px; border-radius: 15px; }
  .tagline { font-size: 13px; color: var(--muted); font-family: var(--font-accent); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }

  /* ============ TOPBAR ============ */
  .topbar {
    background: rgba(22,26,32,.9);
    backdrop-filter: blur(10px);
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .topbar-left { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
  .topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

  /* Contador de auto-logout por inactividad: píldora sin borde; el relleno es el tiempo que queda.
     En el último minuto (.countdown-warning) pasa a ámbar y el reloj se balancea. */
  #inactividad-contador { position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--card); overflow: hidden; font-family: var(--font-accent); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted-strong); transition: color .3s ease; }
  #inactividad-contador.oculto { display: none; }
  .tm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(47,208,200,.16); transition: width .35s linear, background-color .3s ease; }
  .tm-ic { position: relative; width: 15px; height: 15px; flex: none; }
  .tm-rl { position: relative; display: flex; }
  #inactividad-contador.countdown-warning { color: var(--amber); }
  #inactividad-contador.countdown-warning .tm-fill { background: rgba(232,179,76,.2); }
  #inactividad-contador.countdown-warning .tm-ic { animation: tilt-reloj 1.4s ease-in-out infinite; }
  @keyframes tilt-reloj { 0%, 60%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } }

  /* Distintivo de rol junto al logo: píldora cian (el color de "Bet"), sin borde, con punto que late */
  .role-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 13px 0 11px;
    border-radius: 999px;
    background: rgba(47,208,200,.13);
    color: var(--brand-cyan);
    font-family: var(--font-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease;
  }
  .role-chip:empty { display: none; }
  .role-chip:hover { background: rgba(47,208,200,.22); }
  .role-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ping-cian 2s ease-out infinite; }
  @keyframes ping-cian { 0% { box-shadow: 0 0 0 0 rgba(47,208,200,.6); } 100% { box-shadow: 0 0 0 8px rgba(47,208,200,0); } }

  /* Cerrar sesión: el ícono gira 180° al pasar el cursor (borde y halo verdes vienen de la regla global de button) */
  .topbar-salir { display: inline-flex; align-items: center; gap: 7px; }
  .topbar-salir svg { width: 15px; height: 15px; flex: none; transition: transform .35s cubic-bezier(.34,1.5,.64,1); }
  .topbar-salir:hover svg { transform: rotate(180deg) scale(1.1); }

  button {
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--card2);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    min-height: 44px;
    font-family: var(--font-accent);
    letter-spacing: 0;
    transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
  }
  /* Hover y clic (borde luminoso): sin desplazar el botón. El :where() deja la especificidad en 0
     para que cada variante (primary, secondary, danger, pestañas) pueda afinar su propio color. */
  :where(button:hover:not(:disabled):not(.toast-x):not(.btn-cargando)) { border-color: var(--positive); box-shadow: 0 0 0 3px rgba(62,207,131,.25); }
  button.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
  button.primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
  button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
  button.secondary:hover { background: var(--card2); border-color: var(--positive); }
  button.danger { background: transparent; color: var(--danger); border: 1px solid rgba(255,107,87,.4); }
  button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
  button.celeste { background: transparent; color: #5ec8ff; border: 1px solid rgba(94,200,255,.45); }
  button.celeste:hover:not(:disabled) { background: rgba(94,200,255,.12); border-color: #5ec8ff; box-shadow: 0 0 0 3px rgba(94,200,255,.25); }
  button.small { padding: 8px 14px; font-size: 12.5px; min-height: 36px; margin-top: 0; }
  /* El margin-top:0 de arriba es necesario para los botones "small" que
     van EN LÍNEA junto a otro elemento (icono de editar en una tabla,
     grupo de acciones de una fila, etc.) -- pero un botón "small" que va
     SOLO, como acción final de un formulario dentro de una card (Crear,
     Calcular, Agregar, Guardar, Filtrar...), heredaba ese mismo 0 y
     quedaba pegado al campo justo arriba. Esta regla más específica le
     devuelve el espacio SOLO a esos botones "de formulario" (hijos
     directos de .card), sin tocar los que van dentro de una tabla o de
     un grupo de botones en línea. */
  .card > button.small { margin-top: 14px; }
  button.full { width: 100%; margin-top: 16px; }
  button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

  /* Botón de acción principal de cada card (crear, guardar, generar…) */
  .card > button:not(.small):not(.secondary):not(.danger) { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; }
  .card > button:not(.small):not(.secondary):not(.danger):hover { background: var(--primary-strong); border-color: var(--primary-strong); }

  /* Antes: max-width:980px + margin:0 auto -- en pantallas anchas eso
     dejaba franjas enormes de espacio vacío a los dos lados y el layout
     (sidebar + contenido) terminaba viéndose como flotando al centro de
     la pantalla en vez de pegado a la izquierda, y además le dejaba muy
     poco ancho real a las tablas (Streamers, etc.), forzando scroll
     horizontal. Ahora: bastante más ancho, y sin auto-centrado. */
  .container { max-width: 1600px; margin: 0; padding: 20px 24px 48px; }

  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
    animation: card-aparecer .25s ease both;
  }
  .card h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-strong);
    margin: 0 0 16px;
    font-family: var(--font-accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card h2 svg { flex-shrink: 0; color: var(--positive); }

  /* Caja de "grupo" reutilizable dentro de una card, para separar
     visualmente secciones (controles, tabla, reparto, etc.) sin
     necesidad de otra .card completa. */
  .group-box { padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: rgba(255,255,255,.02); }
  .group-box + .group-box { margin-top: 16px; }
  .group-box h2 { margin-top: 0; }

  label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted-strong);
    margin-top: 14px;
    margin-bottom: 6px;
    font-family: var(--font-accent);
  }
  label:first-of-type { margin-top: 0; }

  input, select {
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--input-bg);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    min-height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  input::placeholder { color: #5c6472; }
  input:hover, select:hover { border-color: #4c5567; }
  input:focus, select:focus { border-color: var(--positive); }

  /* margin-top acá (y no solo en <label>) porque cuando cada campo de
     una fila va envuelto en su propio <div> (patrón usado en casi todos
     los formularios: <div><label>...</label><input></div>), CADA una de
     esas <label> termina siendo "la primera <label>" DENTRO de su propio
     div -- entonces la regla de abajo (label:first-of-type) le borraba
     el margin-top a TODAS, no solo a la primera del formulario. Eso es
     lo que hacía que, por ejemplo, "Celular" quedara pegado al campo de
     arriba: su fila entera arrancaba con margin-top:0. Poniendo el
     espaciado en la fila misma en vez de en cada label, una fila que
     viene después de otra fila siempre queda separada, sin depender de
     ese detalle de :first-of-type. */
  .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .row > * { flex: 1; min-width: 140px; }
  .row:first-child { margin-top: 0; }

  /* Grupo de radio buttons compacto (ej: Deducible / No deducible en
     Egresos SkoreBet) -- cada opción ocupa poco alto para dejarle sitio
     al texto descriptivo + ejemplos de cada clasificación, en vez de un
     input de texto libre que no explicaba nada. */
  .radio-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; position: relative; }
  .radio-option {
    flex: 1; min-width: 220px; display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: var(--input-bg); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
    margin: 0; /* .radio-option ES un <label>, y la regla global "label" de más
      arriba le mete margin-top/margin-bottom por defecto -- :first-of-type
      solo se lo resetea al PRIMERO de cada grupo, así que el segundo (y
      siguientes) quedaban corridos respecto a sus hermanos. El espaciado
      entre opciones ya lo da el gap del .radio-group; acá no hace falta. */
  }
  .radio-option:hover { border-color: #4c5567; }
  .radio-option input[type="radio"] { appearance: none; margin: 3px 0 0; width: 15px; height: 15px; flex-shrink: 0; min-height: 0;
    border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--card); cursor: pointer; position: relative;
    transition: border-color .12s ease; }
  /* El punto y el aro verde aparecen DESPUÉS de que el marco deslizante llegue
     (retraso .22s); al desmarcar se apagan al instante. */
  .radio-option input[type="radio"]::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--positive);
    transform: scale(0); opacity: 0; transition: transform .12s ease, opacity .12s ease; }
  .radio-option input[type="radio"]:checked { border-color: var(--positive); transition: border-color .15s ease .22s; }
  .radio-option input[type="radio"]:checked::after { transform: scale(1); opacity: 1;
    transition: transform .25s cubic-bezier(.34,1.6,.64,1) .22s, opacity .1s ease .22s; }
  .radio-option input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .radio-option.is-checked { border-color: var(--positive); background: var(--primary-soft); }
  /* Con el marco deslizante (JS: posDeslizador) la opción marcada no pinta su propio
     borde/fondo: lo pone el marco único que viaja entre opciones. */
  .radio-group.con-marco .radio-option { position: relative; z-index: 1; background: transparent; }
  .radio-group.con-marco .radio-option.is-checked, .radio-group.con-marco .radio-option.is-checked:hover { border-color: transparent; background: transparent; }
  /* ===== Componentes reutilizables (JS: "Componentes de interfaz reutilizables") ===== */
  /* Las tarjetas crean su propio plano (animación de entrada): sin esto, la lista abierta queda DEBAJO de la
     tarjeta siguiente. La tarjeta que contiene el buscador desplegable abierto sube de nivel. */
  .card:has(.ui-combo-lista:not([hidden])), .card:focus-within { position: relative; z-index: 20; }
  .ui-combo { position: relative; }
  .ui-combo input { padding-right: 38px; cursor: pointer; }
  .ui-combo-ic { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; color: var(--muted); transition: transform .2s ease, color .15s ease; }
  .ui-combo:focus-within .ui-combo-ic { transform: rotate(180deg); color: var(--positive); }
  .ui-combo-lista { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); box-shadow: 0 10px 28px rgba(0,0,0,.45); animation: msg-in .15s ease; }
  .ui-combo-lista[hidden] { display: none; }
  .ui-combo-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
  .ui-combo-it.act { background: var(--positive-soft); }
  .ui-combo-it.sel { font-weight: 700; }
  .ui-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; background: var(--primary-soft); color: var(--positive); flex: none; }
  .ui-combo-pie { padding: 6px 8px 2px; font-size: 11.5px; color: var(--muted); }
  .ui-pd { position: relative; flex: 0 0 auto; min-width: 250px; }
  .ui-pd-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; margin-top: 6px; padding: 0 12px; text-align: left; }
  .ui-pd-lab { font-weight: 600; }
  .ui-pd-dat { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
  .ui-pd-btn svg { width: 16px; height: 16px; flex: none; }
  .ui-pd.ui-pf { min-width: 0; width: 100%; }
  .ui-pf .ui-pd-btn { margin-top: 0; }
  .ui-cal-box.ui-cal-1 { max-width: 520px; }
  .ui-cal-r .uc-dia { text-transform: capitalize; white-space: nowrap; }
  .modal-box.ui-cal-box { max-width: 560px; }
  /* Sesiones activas: más ancho para que la tabla (Dispositivo / IP / Último uso / Inicio) no necesite scroll horizontal */
  .modal-box.ses-box { max-width: min(880px, 100%); }
  .modal-box.ses-box td, .modal-box.ses-box th { white-space: nowrap; }
  .modal-box.ses-box td:first-child { white-space: normal; }
  /* Sesiones activas: filtro (Mis logins / Streamers / Jugadores) */
  .ses-filtro { margin: 2px 0 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .ses-filtro > select { flex: 0 0 190px; width: 190px; margin: 0; }
  .ses-filtro > #ses-panel { flex: 1 1 280px; min-width: 0; }
  .ses-filtro .rdb-lista { max-height: 170px; }
  .ses-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ses-chips:empty { display: none; }
  /* Historial de ingresos y egresos: filtros a la izquierda, balance a la derecha y la tabla debajo */
  .eg-hist-top { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; margin-bottom: 14px; }
  .eg-hist-filtros { flex: 1 1 440px; min-width: 0; }
  .eg-hist-filtros h2 { margin: 0 0 12px; }
  .eg-hist-filtros .ui-barra { margin-bottom: 0; }
  .eg-hist-balance { flex: 0 1 340px; min-width: 260px; padding-left: 28px; border-left: 1px solid var(--border); }
  .eg-hist-balance:empty { display: none; }
  /* Balance: cada total en una sola fila (etiqueta a la izquierda, importe a la derecha) */
  .eg-hist-balance .list-row { flex-wrap: nowrap; justify-content: space-between; padding: 10px 10px; }
  .eg-hist-balance .list-row .list-row-info { flex: 1 1 auto; min-width: 0; }
  .eg-hist-balance .list-row > b { white-space: nowrap; }
  .eg-hist-balance .list-row:first-child { padding-top: 0; }
  td.eg-notas { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
  /* Acciones por fila del historial: dos botones solo con icono, cuadrados y siempre visibles */
  .eg-acciones { width: 1%; white-space: nowrap; }
  .eg-acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }
  .eg-acciones-fila button.small { width: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  @media (max-width: 900px) { .eg-hist-balance { flex-basis: 100%; padding-left: 0; border-left: 0; } }
  .ui-cal-wrap { display: flex; gap: 18px; flex-wrap: wrap; }
  .ui-cal-main { flex: 1 1 270px; min-width: 250px; }
  .ui-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .ui-cal-head button { width: 30px; height: 30px; min-height: 0; padding: 0; margin: 0; }
  .ui-cal-t { font-weight: 600; font-size: 14px; text-transform: capitalize; }
  .ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
  .ui-cal-dh { font-size: 11px; color: var(--muted); padding: 4px 0; }
  .ui-cal-d { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 8px; cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .15s ease; }
  .ui-cal-d:hover { transform: scale(1.08); }
  .ui-cal-d.in { background: var(--positive-soft); border-radius: 0; }
  .ui-cal-d.e { background: var(--positive); color: #04342C; font-weight: 700; border-radius: 8px; }
  .ui-cal-d.hoy { box-shadow: inset 0 0 0 1px var(--border-strong); }
  .ui-cal-pre { display: flex; flex-direction: column; gap: 6px; flex: 0 0 140px; }
  .ui-cal-pre .ui-cal-sin { font-weight: 700; border-color: var(--positive); }
  .ui-cal-pre .ui-cal-sin.on { background: var(--positive); color: #04342C; }
  .ui-cal-pre button { text-align: left; margin: 0; min-height: 0; padding: 7px 12px; font-size: 13px; }
  .ui-cal-r { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .ui-cal-r b { color: var(--text); }
  .ui-cal-r input.uc-in { width: 112px; min-height: 36px; padding: 6px 8px; font-size: 13.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .ui-cal-r input.uc-in.mal { border-color: var(--danger); }
  .ui-cal-r input.uc-in.mal:focus { box-shadow: 0 0 0 3px rgba(255,107,87,.3); }
  .ui-cal-r .uc-c { white-space: nowrap; }
  .ui-cal-m { margin-top: 6px; font-size: 12.5px; color: var(--muted); min-height: 18px; }
  .ui-cal-m.err { color: var(--danger); }
  .ui-sw-fila { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; font-size: 13px; color: var(--muted-strong); cursor: pointer; }
  .ui-sw { display: inline-block; position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--border-strong); flex: none; transition: background-color .2s ease; }
  .ui-sw i { position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.34,1.4,.64,1); }
  .ui-sw[aria-checked="true"] { background: var(--positive); }
  .ui-sw[aria-checked="true"] i { transform: translateX(15px); }
  .ui-sw:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ui-sw-fila + input:disabled { opacity: .5; cursor: not-allowed; }
  .ui-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .ui-barra-q { flex: 1 1 200px; min-width: 160px; margin: 0; }
  .ui-barra-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .ui-chip { font-size: 12px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border-strong); cursor: pointer; user-select: none; transition: border-color .15s ease, background-color .15s ease; }
  .ui-chip:hover { border-color: #4c5567; }
  .ui-chip.on { border-color: var(--positive); background: var(--positive-soft); }
  .ui-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ui-limpiar { border-color: transparent; color: var(--positive); }
  @media (hover: hover) {
    #vistas table:not(.tabla-players):not(.eg-tabla) td > button.small[aria-label] { opacity: 0; transition: opacity .15s ease; }
    #vistas table:not(.tabla-players):not(.eg-tabla) tr:hover td > button.small[aria-label], #vistas table:not(.tabla-players):not(.eg-tabla) tr:focus-within td > button.small[aria-label] { opacity: 1; }
  }
  .radio-group > .marco { z-index: 0; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--positive); background: var(--primary-soft); }
  .radio-option-text { display: flex; flex-direction: column; gap: 2px; }
  .radio-option-text b { font-size: 13px; font-family: var(--font-accent); line-height: 1.2; }
  .radio-option-text span { font-size: 11px; color: var(--muted); line-height: 1.35; }
  /* Variante compacta del radio-option: solo la etiqueta en negrita, sin
     texto descriptivo (ej: selector Ingreso/Egreso en el registro
     interno) -- no necesita el alto extra de las tarjetas con ejemplos.
     "height" fija (no solo min-height) para que Ingreso/Egreso midan
     EXACTAMENTE lo mismo sin importar cuál esté marcado -- min-height
     por sí solo dependía de que el stretch del flex-group calzara igual
     en los dos, y en la práctica no siempre se veía parejo. */
  .radio-option.compact { flex: 0 1 auto; min-width: 110px; padding: 0 16px; align-items: center; height: 44px; }

  /* Grid de 2 columnas para formularios compactos (ej: registro interno
     Ingreso/Egreso): col. izquierda = campo principal, col. derecha =
     su clasificación/opciones asociadas; la fila de abajo repite el
     patrón con los campos secundarios. Los .row anidados adentro no
     necesitan su propio margin-top, ya lo da el grid con "gap". */
  .form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
  .form-grid-2col > .row { margin-top: 0; }
  /* En pantallas angostas se pierde el sentido de la ubicación cruzada
     (tipo arriba-izq / categoría derecha ocupando 2 filas / concepto
     abajo-izq) -- se resetea a una sola columna en orden natural del
     DOM. El !important es necesario porque cada celda trae su propia
     posición como estilo inline (más específico que una regla de hoja
     de estilos normal). */
  @media (max-width: 640px) {
    .form-grid-2col { grid-template-columns: 1fr; }
    .form-grid-2col > * { grid-column: 1 !important; grid-row: auto !important; }
  }

  .msg {
    margin-top: 12px;
    font-size: 13.5px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
  }
  .msg.ok { display: flex; background: var(--positive-soft); color: #8fe0af; border-color: rgba(34,145,85,.3); }
  .msg.error { display: flex; background: var(--danger-soft); color: #ffb3a6; border-color: rgba(255,107,87,.3); }

  table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
  th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
  th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-accent); }
  tr:last-child td { border-bottom: none; }
  /* Tabla de Streamers: Nombre, Correo, Celular, Estado, % Uso y Facturación centrados (en horizontal y en vertical) */
  .tabla-centro th, .tabla-centro td { vertical-align: middle; }
  @media (min-width: 781px) {
    .tabla-centro th:nth-child(n+2):nth-child(-n+7), .tabla-centro td:nth-child(n+2):nth-child(-n+7) { text-align: center; }
  }
  .table-wrap { overflow-x: auto; margin: 0 -4px; }
  td code {
    font-family: var(--mono);
    background: var(--card2);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
  }

  .badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: .03em; font-family: var(--font-accent); text-transform: uppercase; background: var(--card2); color: var(--muted-strong); }
  .badge.activo, .badge.liquidado, .badge.verificado, .badge.ok, .badge.sin_deuda { background: var(--positive-soft); color: var(--positive); }
  .badge.suspendido, .badge.pendiente, .badge.pagado_reportado, .badge.falta_verificar { background: var(--amber-soft); color: var(--amber); }
  .badge.observado { background: var(--danger-soft); color: var(--danger); }
  .badge.congelado, .badge.rechazado, .badge.con_deuda { background: var(--danger-soft); color: var(--danger); }
  .badge.subida, .badge.resuelto { background: var(--info-soft); color: var(--info); }
  .badge.deducible { background: var(--positive-soft); color: var(--positive); }
  .badge.no_deducible { background: var(--danger-soft); color: var(--danger); }

  .layout { display: flex; gap: 20px; align-items: flex-start; }
  .vistas-col { flex: 1; min-width: 0; }

  .tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 6px;
    border-radius: var(--radius-md);
    width: 230px;
    flex-shrink: 0;
    position: sticky;
    top: 78px;
  }
  .tabs button {
    background: transparent;
    color: var(--muted);
    border-radius: var(--radius-sm);
    min-height: 40px;
    border-color: transparent;
    margin-top: 0;
    width: 100%;
    text-align: left;
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    isolation: isolate;
  }
  .tabs button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabs button:hover { background: transparent; color: var(--text); transform: none; }
  .tabs button.active { background: var(--positive-soft); color: var(--positive); font-weight: 700; }
  .subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; position: relative; }
  .subtabs button { flex: 0 0 auto; min-width: 0; padding: 8px 14px; font-size: 13px; min-height: 36px; margin-top: 0; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); }
  .subtabs button.active { background: transparent; color: var(--text); border-color: transparent; font-weight: 700; }

  .hidden { display: none !important; }

  .tiny { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
  .tiny b { color: var(--muted-strong); }

  /* ============ FILA DE LISTA (facturación / alertas) ============ */
  .list-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .list-row:last-child { border-bottom: none; }
  .list-row .list-row-info { flex: 1 1 260px; font-size: 13.5px; }
  .list-row .list-row-info b { font-family: var(--font-accent); }

  /* ============ CONFIG / LOGIN SCREENS ============ */
  #config-screen, #login-screen { max-width: 420px; margin: 70px auto 0; padding-left: 16px; padding-right: 16px; }

  @keyframes card-aparecer { from { opacity: 0; } to { opacity: 1; } }

  /* ============ MODAL ============ */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; z-index: 100;
  }
  .modal-box {
    background: var(--card); border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg); padding: 20px; max-width: 460px; width: 100%;
    max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-card);
    animation: card-aparecer .18s ease both;
  }
  .modal-box h2 { margin-top: 0; }
  .modal-actions { display: flex; gap: 8px; margin-top: 16px; }
  .modal-actions button { margin-top: 0; flex: 1; }


  /* ============ VENTANAS DE CONFIRMACION (Data Base > Bases de datos) ============ */
  .modal-box.rdb-box { padding: 0; max-width: 560px; overflow: hidden; display: flex; flex-direction: column; }
  .rdb { display: flex; flex-direction: column; min-height: 0; }
  .rdb-head { display: flex; gap: 14px; align-items: center; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
  .rdb-icon { flex: 0 0 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255,107,87,.28); }
  .rdb-icon svg { width: 22px; height: 22px; }
  .rdb-head.es-seguro .rdb-icon { background: var(--positive-soft); color: var(--positive); border-color: rgba(62,207,131,.28); }
  .rdb-head h2 { margin: 0; font-size: 18px; line-height: 1.25; }
  .rdb-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
  .rdb-head:not(.es-seguro) .rdb-sub { color: #ffb3a6; }
  .rdb-body { padding: 18px 22px 6px; overflow-y: auto; min-height: 0; }
  .rdb-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
  .rdb-campos:disabled { opacity: .55; pointer-events: none; }
  .rdb-impacto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rdb-col { border-radius: var(--radius-md); padding: 12px 14px; border: 1px solid var(--border); background: var(--bg-elevated); }
  .rdb-col h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
  .rdb-col h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .rdb-col.borra h3 { color: var(--danger); }
  .rdb-col.conserva h3 { color: var(--positive); }
  .rdb-col.borra { border-color: rgba(255,107,87,.25); }
  .rdb-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
  .rdb-col li { font-size: 12.5px; line-height: 1.45; color: var(--muted-strong); padding-left: 12px; position: relative; }
  .rdb-col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 1px; background: var(--muted); }
  .rdb-aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; color: #f1d9a3; background: var(--amber-soft); border: 1px solid rgba(232,179,76,.28); }
  .rdb-seccion { margin-top: 16px; }
  .rdb-seccion-titulo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-family: var(--font-accent); font-size: 13px; font-weight: 600; color: var(--text); }
  .rdb-seccion-titulo .tiny { font-weight: 500; }
  .rdb-lista-wrap { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--input-bg); overflow: hidden; }
  .rdb-lista-barra { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
  .rdb-lista-barra input[type="search"] { min-height: 34px; padding: 6px 10px; font-size: 13px; flex: 1 1 auto; width: auto; }
  .rdb-lista { max-height: 210px; overflow-y: auto; }
  .rdb-item, .rdb-todos, .rdb-opcion { display: flex; align-items: center; gap: 11px; cursor: pointer; margin: 0; }
  .rdb-item { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); transition: background-color .12s ease; }
  .rdb-item:last-child { border-bottom: 0; }
  .rdb-item:hover { background: var(--card2); }
  .rdb-item.on { background: var(--primary-soft); }
  .rdb-item-nombre { font-weight: 600; font-family: var(--font-accent); flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rdb-item-meta { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rdb-estado { flex: 0 0 auto; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--positive-soft); color: var(--positive); }
  .rdb-estado.suspendido, .rdb-estado.congelado { background: var(--amber-soft); color: var(--amber); }
  .rdb-vacio { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--muted); }
  .rdb-todos { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-accent); white-space: nowrap; }
  .rdb-opcion { align-items: flex-start; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elevated); font-size: 13.5px; color: var(--text); transition: border-color .12s ease; }
  .rdb-opcion:hover { border-color: var(--positive); }
  .rdb-opcion b { font-family: var(--font-accent); font-weight: 600; }
  .rdb-opcion small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--muted); font-weight: 400; }
  .rdb input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 1px 0 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--input-bg); display: grid; place-items: center; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
  .rdb input[type="checkbox"]:hover { border-color: var(--positive); }
  .rdb input[type="checkbox"]:checked, .rdb input[type="checkbox"]:indeterminate { background: var(--positive); border-color: var(--positive); }
  .rdb input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #0b2416; border-bottom: 2px solid #0b2416; transform: rotate(-45deg) translate(1px,-1px); }
  .rdb input[type="checkbox"]:indeterminate::after { content: ""; width: 9px; height: 2px; background: #0b2416; border-radius: 1px; }
  .rdb-confirm { margin-top: 16px; }
  .rdb-confirm label { margin: 0 0 7px; font-size: 13px; }
  .rdb-frase { font-family: var(--mono); font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--card2); border: 1px solid var(--border-strong); color: var(--text); user-select: all; }
  .rdb-confirm input { font-family: var(--mono); letter-spacing: .04em; }
  .rdb-confirm input.ok { border-color: var(--positive); }
  .rdb-progreso { margin-top: 16px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-elevated); }
  .rdb-progreso-txt { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
  .rdb-spin { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--positive); animation: rdb-giro .8s linear infinite; }
  .rdb-barra { height: 6px; margin-top: 11px; border-radius: 999px; background: var(--card2); overflow: hidden; }
  .rdb-barra > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--positive); transition: width .25s ease; }
  .rdb-barra.indef > i { width: 35%; animation: rdb-indef 1.1s ease-in-out infinite alternate; }
  .rdb-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px 20px; }
  .rdb-foot button { flex: 0 1 auto; min-width: 120px; margin-top: 0; }
  .rdb-foot button.rdb-go { background: var(--danger); border-color: var(--danger); color: #1c0a06; font-weight: 700; }
  .rdb-foot button.rdb-go:hover:not(:disabled) { background: #ff8270; border-color: #ff8270; }
  .rdb-foot button.rdb-go.es-seguro { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
  .rdb-foot button.rdb-go.es-seguro:hover:not(:disabled) { background: var(--primary-strong); border-color: var(--primary-strong); }
  .rdb-resultado { padding: 26px 22px 6px; text-align: center; }
  .rdb-resultado .rdb-icon { margin: 0 auto 12px; width: 48px; height: 48px; flex-basis: 48px; border-radius: 50%; }
  .rdb-resultado.hubo-errores .rdb-icon { background: var(--amber-soft); color: var(--amber); border-color: rgba(232,179,76,.3); }
  .rdb-resultado.ok .rdb-icon { background: var(--positive-soft); color: var(--positive); border-color: rgba(62,207,131,.3); }
  .rdb-resultado h2 { margin: 0 0 6px; font-size: 18px; }
  .rdb-resultado p { margin: 0; font-size: 13.5px; color: var(--muted-strong); }
  .rdb-errores { margin: 14px 0 0; padding: 10px 12px; text-align: left; list-style: none; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid rgba(255,107,87,.28); font-size: 12.5px; color: #ffb3a6; display: grid; gap: 4px; max-height: 140px; overflow-y: auto; }
  @keyframes rdb-giro { to { transform: rotate(360deg); } }
  @keyframes rdb-indef { from { margin-left: 0; } to { margin-left: 65%; } }

  /* ===== Barra de progreso animada EN el botón (reutilizable) =====
     Se activa con conProgreso(btn, fn) / btnCargando(btn, true) -- ver JS.
     Misma animación "indeterminada" de la barra de Limpiar cachés, pero
     pegada al borde inferior del botón. Usa currentColor para verse bien
     sobre botones primary, secondary y danger. */
  button.btn-cargando { position: relative; overflow: hidden; pointer-events: none; cursor: progress; }
  button.btn-cargando::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .22; }
  button.btn-cargando::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 35%; border-radius: 999px; background: currentColor; animation: btn-barra 1.1s ease-in-out infinite; }
  @keyframes btn-barra { from { transform: translateX(-100%); } to { transform: translateX(285%); } }
  /* Retícula 3x3 en onda (la misma del panel público) para botones con la clase .btn-reticula:
     aparece a la derecha del botón (fuera de él) mientras trabaja y reemplaza la barra inferior. */
  @keyframes ola { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
  button.btn-reticula.btn-cargando::before, button.btn-reticula.btn-cargando::after { display: none; }
  /* Separador vertical gris entre las dos columnas del card de Drive/Alertas */
  .alertas-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
  @media (max-width: 900px) { .alertas-3col { grid-template-columns: 1fr; } }
  .col-sep { border-left: 1px solid var(--border-strong, var(--border)); padding-left: 28px; }
  @media (max-width: 900px) { .col-sep { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-strong, var(--border)); padding-top: 16px; } }
  .btn-lat { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 20px; height: 20px; margin-left: 12px; vertical-align: middle; }
  .btn-lat i { display: block; border-radius: 1.5px; background: var(--positive); opacity: .2; animation: ola 1.2s ease-in-out infinite; animation-delay: var(--d); }

  /* ============ CAPA DE ANIMACIONES REUTILIZABLES ============
     Cada bloque tiene UNA sola implementación (JS en "Utilidades de animación"):
       1 Botón al terminar  -> btnFin()/conProgreso()   .btn-fin-ok / .btn-fin-er
       2 Carga de listas    -> observador de listas      .fila-entra (entrada escalonada)
       3 Aviso en línea     -> mostrarMsg()              .msg-ico
       4 Campo inválido     -> campoInvalido()           .campo-error
       5 Pestañas           -> posDeslizador()           .desliza.ind
       6 Filas de tabla     -> observador + filaSale()   .fila-nueva / .fila-editada / .fila-sale
       7 Avisos flotantes   -> toast()                   .toast-bar
       8 Ventanas           -> centrada con zoom suave     modal-in / modal-out
       9 Estados            -> observador de listas      .badge-flip
      10 Hover y clic       -> regla global de button
      11 Descargas          -> conProgreso() + chipArchivo()   .chip-archivo
      12 Cambio de pestaña  -> cambiarVista()/entradaEscalonada()   #vistas.vista-sale
      13 Carga              -> cargandoHTML()            .sk-fila (esqueleto con brillo)
      14 Login -> panel     -> entrarAlPanel()           .login-sale / .app-entra
      15 Menú lateral       -> posDeslizador()           .desliza.pill
      18 Radios             -> posDeslizador()           .desliza.marco (marco verde + punto con retraso)
      19 Selector buscable  -> select[data-combo]        .ui-combo
      20 Periodo            -> inputs *-desde/*-hasta    .ui-pd (botón) que abre el calendario en ventana (abrirModal)
      20b Fecha (un día)    -> input type=date suelto    .ui-pd.ui-pf (botón) que abre el calendario de un día en ventana
      21 Por defecto o propio -> input[data-defecto]     .ui-sw
      22 Filtro de listas   -> LISTAS_FILTRO (>=5 filas) .ui-barra / .ui-chip
      23 Acciones de fila   -> solo CSS                  td > button.small[aria-label] aparece al pasar el cursor
      16 Estados vacíos     -> estadoVacio()             .vacio
      17 Avisos apilados    -> toast()                   .toast.saliendo (colapsa altura), pausa al hover */
  button.btn-fin-ok, button.btn-fin-er { position: relative; overflow: hidden; }
  button.btn-fin-ok::after, button.btn-fin-er::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: var(--positive); animation: btn-fin 1.4s both; }
  button.btn-fin-er::after { background: var(--danger); }
  @keyframes btn-fin { 0% { transform: scaleX(.35); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

  .fila-entra > td, div.fila-entra { animation: fila-sube .35s both; animation-delay: var(--d, 0ms); }
  @keyframes fila-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .fila-nueva > td, div.fila-nueva { animation: fila-nueva .45s cubic-bezier(.2,.9,.3,1.1) both; }
  @keyframes fila-nueva { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  .fila-editada > td { animation: fila-fondo 1.3s; }
  .fila-editada > td:first-child, div.fila-editada { animation: fila-borde 1.3s; }
  @keyframes fila-fondo { 0%, 70% { background: rgba(232,179,76,.1); } 100% { background: transparent; } }
  @keyframes fila-borde { 0%, 70% { box-shadow: inset 3px 0 0 var(--amber); background: rgba(232,179,76,.1); } 100% { box-shadow: inset 3px 0 0 transparent; background: transparent; } }
  .fila-sale > td { animation: fila-sale .5s forwards; }
  div.fila-sale { overflow: hidden; animation: fila-sale-div .5s forwards; }
  @keyframes fila-sale { to { opacity: 0; transform: translateX(-34px); } }
  @keyframes fila-sale-div { 0% { opacity: 1; max-height: 80px; } 60% { opacity: 0; transform: translateX(-34px); max-height: 80px; } 100% { opacity: 0; transform: translateX(-34px); max-height: 0; padding-top: 0; padding-bottom: 0; } }
  .badge-flip { display: inline-block; animation: badge-giro .4s both; }
  @keyframes badge-giro { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

  .msg { position: relative; overflow: hidden; }
  .msg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; transform: scaleY(0); transform-origin: top; animation: msg-borde .35s forwards; }
  .msg .msg-ico { width: 16px; height: 16px; flex: 0 0 16px; }
  .msg .msg-ico path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: msg-trazo .5s .15s forwards; }
  @keyframes msg-borde { to { transform: scaleY(1); } }
  @keyframes msg-trazo { to { stroke-dashoffset: 0; } }

  .campo-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft); animation: campo-sacudida .4s; }
  @keyframes campo-sacudida { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

  /* ===== Deslizador único (JS: posDeslizador) =====
     Base COMPARTIDA por la píldora del menú (.pill), el subrayado de subpestañas (.ind)
     y el marco de los radios (.marco). Cada uno solo define su aspecto; el movimiento
     (left/top/width/height/opacity) se escribe una vez aquí. Ajustable con --desliza-dur / --desliza-ease. */
  .desliza { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none;
    transition: left var(--desliza-dur,.4s) var(--desliza-ease,cubic-bezier(.34,1.35,.64,1)), top var(--desliza-dur,.4s) var(--desliza-ease,cubic-bezier(.34,1.35,.64,1)),
      width .3s ease, height .3s ease, opacity .2s ease; }
  .subtabs .ind { height: 3px; border-radius: 3px; background: var(--positive); --desliza-dur: .3s; --desliza-ease: cubic-bezier(.2,.9,.3,1.1); }

  .toast { position: relative; overflow: hidden; }
  .toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--info); transform-origin: left; animation: toast-cuenta linear forwards; }
  .toast.ok .toast-bar { background: var(--positive); } .toast.error .toast-bar { background: var(--danger); } .toast.aviso .toast-bar { background: var(--amber); }
  @keyframes toast-cuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }


  .chip-archivo { position: fixed; z-index: 250; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--radius-sm); background: var(--card2); border: 1px solid rgba(62,207,131,.35); color: var(--muted-strong); font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
  .chip-archivo.in { opacity: 1; transform: none; }
  .chip-archivo svg { width: 14px; height: 14px; color: var(--positive); }
  @media (max-width: 520px) {
    .rdb-impacto { grid-template-columns: 1fr; }
    .rdb-head, .rdb-body, .rdb-foot { padding-left: 16px; padding-right: 16px; }
    .rdb-foot button { flex: 1 1 0; }
    .rdb-item-meta { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { button.btn-cargando::after { animation: none; width: 100%; opacity: .6; } .rdb-spin, .rdb-barra.indef > i { animation: none; } .modal-box.rdb-box { animation: none; } }


  /* ============ CAPA DE INTERACCION GLOBAL (scroll, selects, checkboxes, ventanas, avisos) ============ */
  html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: #4c5567; background-clip: content-box; }

  select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c96a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
  select:hover:not(:disabled) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ecf83' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  select:disabled { opacity: .5; cursor: not-allowed; }
  select option { background: var(--card); color: var(--text); }

  input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--input-bg); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; }
  input[type="checkbox"]:hover { border-color: var(--positive); }
  input[type="checkbox"]:active { transform: scale(.9); }
  input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate { background: var(--positive); border-color: var(--positive); }
  input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #0b2416; border-bottom: 2px solid #0b2416; transform: rotate(-45deg) translate(1px,-1px); }
  input[type="checkbox"]:indeterminate::after { content: ""; width: 9px; height: 2px; background: #0b2416; border-radius: 1px; }

  /* Ventanas: entrada con escala + desenfoque de fondo, salida animada */
  .modal-overlay { background: rgba(8,10,14,.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: overlay-in .18s ease both; }
  .modal-overlay.saliendo { animation: overlay-out .14s ease both; }
  .modal-box {
    padding: 22px; border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.35), 0 28px 70px rgba(0,0,0,.6);
    animation: modal-in .26s cubic-bezier(.2,.9,.3,1.05) both;
    transform-origin: 50% 50%; will-change: transform, opacity;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
    max-height: min(90vh, 90dvh);
  }
  /* Siempre centrada (vertical y horizontal), también al animar y en móvil */
  .modal-overlay { align-items: center; justify-content: center; padding: 16px; overscroll-behavior: contain; }
  .modal-overlay.saliendo { pointer-events: none; }
  .modal-overlay.saliendo .modal-box { animation: modal-out .14s ease-in both; }
  button.small > svg { width: 15px; height: 15px; display: block; }
  .modal-box h2 { font-size: 18px; line-height: 1.3; margin: 0 0 10px; }
  .modal-box > p { font-size: 13.5px; line-height: 1.55; color: var(--muted-strong); margin: 0 0 10px; }
  .modal-box > p.tiny { color: var(--muted); }
  .modal-box > input, .modal-box > select { margin-top: 4px; }
  .modal-actions { justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
  .modal-actions button { flex: 0 1 auto; min-width: 120px; }
  @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes overlay-out { to { opacity: 0; } }
  @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.97); } }

  /* Diálogos de aviso / confirmación (reemplazan alert() y confirm() del navegador) */
  .dlg-overlay { z-index: 200; }
  .modal-box.dlg-box { padding: 0; max-width: 430px; overflow: hidden; }
  .dlg-body { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px 8px; }
  .dlg-body h2 { margin: 2px 0 6px; font-size: 17px; }
  .dlg-body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-strong); white-space: pre-line; }
  .rdb-icon.t-aviso { background: var(--amber-soft); color: var(--amber); border-color: rgba(232,179,76,.3); }
  .rdb-icon.t-info { background: var(--info-soft); color: var(--info); border-color: rgba(110,168,254,.3); }
  .rdb-icon.t-ok { background: var(--positive-soft); color: var(--positive); border-color: rgba(62,207,131,.3); }

  /* Avisos no bloqueantes */
  #toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 0; align-items: flex-end; pointer-events: none; }
  .toast { pointer-events: auto; display: flex; gap: 11px; align-items: flex-start; max-width: min(400px, calc(100vw - 36px)); padding: 12px 10px 12px 12px; border-radius: var(--radius-md); background: var(--card2); border: 1px solid var(--border-strong); box-shadow: 0 14px 34px rgba(0,0,0,.45); font-size: 13.5px; color: var(--text); animation: toast-in .3s cubic-bezier(.2,.9,.3,1.1) both; }
  #toast-root > .toast { margin-top: 10px; }
  .toast.saliendo { animation: toast-sale .38s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
  .toast:hover .toast-bar { animation-play-state: paused; }
  @keyframes toast-sale {
    0%   { opacity: 1; transform: none; max-height: var(--h, 120px); margin-top: 10px; padding-top: 12px; padding-bottom: 12px; }
    45%  { opacity: 0; transform: translateX(34px); max-height: var(--h, 120px); margin-top: 10px; padding-top: 12px; padding-bottom: 12px; }
    100% { opacity: 0; transform: translateX(34px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
  }
  .toast-ico { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
  .toast-ico svg { width: 13px; height: 13px; }
  .toast.ok .toast-ico { background: var(--positive-soft); color: var(--positive); }
  .toast.error .toast-ico { background: var(--danger-soft); color: var(--danger); }
  .toast.aviso .toast-ico { background: var(--amber-soft); color: var(--amber); }
  .toast.info .toast-ico { background: var(--info-soft); color: var(--info); }
  .toast.ok { border-color: rgba(62,207,131,.35); } .toast.error { border-color: rgba(255,107,87,.4); } .toast.aviso { border-color: rgba(232,179,76,.35); }
  .toast-txt { flex: 1; line-height: 1.45; padding-top: 1px; }
  .toast-x { min-height: 0; padding: 0 7px; margin: 0; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 22px; }
  .toast-x:hover { color: var(--text); transform: none; background: transparent; }
  @keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateX(14px); } }

  /* Mensajes en línea, cargas y navegación */
  .msg.ok, .msg.error { animation: msg-in .22s ease both; }
  @keyframes msg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .cargando { display: flex; align-items: center; gap: 10px; padding: 12px 2px; font-size: 13.5px; color: var(--muted); }
  .card > .cargando { padding: 2px; }

  .card:nth-child(2) { animation-delay: .04s; } .card:nth-child(3) { animation-delay: .08s; } .card:nth-child(n+4) { animation-delay: .12s; }
  .tabs button { position: relative; transition: background-color .15s ease, color .25s ease; }
  /* Foco de luz: un resplandor que sigue al cursor dentro del botón (JS: pointermove sobre #tabs fija --mx/--my) */
  .tabs button::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), var(--positive-soft), transparent 70%); }
  .tabs button:hover::after { opacity: 1; }
  .tabs button::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--positive); transform: scaleY(0); transition: transform .2s ease; }
  .tabs button.active::before { transform: scaleY(1); }
  .subtabs button { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
  .subtabs button:hover:not(.active) { background: var(--card2); color: var(--text); border-color: #4c5567; }
  :where(button:active:not(:disabled):not(.toast-x)) { box-shadow: 0 0 0 1px rgba(62,207,131,.5), inset 0 2px 6px rgba(0,0,0,.4); }
  button.danger:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(255,107,87,.25); }
  button.danger:active:not(:disabled) { box-shadow: 0 0 0 1px rgba(255,107,87,.5), inset 0 2px 6px rgba(0,0,0,.4); }
  .tabs button:hover, .subtabs button:hover { box-shadow: none; }
  tr td { transition: background-color .12s ease; }
  tr:hover td { background: rgba(255,255,255,.03); }
  .list-row { padding: 12px 10px; margin: 0 -10px; transition: background-color .15s ease; }
  .list-row:hover { background: rgba(255,255,255,.02); }
  .badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
  #login-screen .card { animation: modal-in .4s cubic-bezier(.2,.9,.3,1.1) both; }
  .modal-box.rdb-box { animation: modal-in .26s cubic-bezier(.2,.9,.3,1.05) both; }
  .modal-overlay.saliendo .modal-box.rdb-box { animation: modal-out .14s ease-in both; }

  /* ===== S1 · Cambio de pestaña principal: el contenido sale rápido y las tarjetas entran escalonadas (JS: cambiarVista) ===== */
  #vistas { transition: opacity .11s ease, transform .11s ease; }
  #vistas.vista-sale { opacity: 0; transform: translateY(-4px); }
  /* Subpestañas: mismo efecto que el cambio de pestaña principal (JS: cambiarSubvistaAnimada) */
  #players-contenido, #facturacion-contenido, #config-contenido, #alertas-contenido { transition: opacity .11s ease, transform .11s ease; }
  #players-contenido.vista-sale, #facturacion-contenido.vista-sale, #config-contenido.vista-sale, #alertas-contenido.vista-sale { opacity: 0; transform: translateY(-4px); }

  /* ===== S2 · Carga con esqueleto (cargandoHTML) ===== */
  .cargando.cargando-sk { display: block; padding: 2px; }
  .sk-txt { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
  .sk-fila { display: grid; grid-template-columns: 1fr 1.6fr .8fr; gap: 14px; padding: 13px 4px; border-top: 1px solid var(--border); }
  .sk-fila i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--card2) 25%, #353d4b 50%, var(--card2) 75%); background-size: 220% 100%; animation: sk-brillo 1.25s linear infinite; }
  .sk-fila i:nth-child(1) { width: 72%; } .sk-fila i:nth-child(2) { width: 88%; } .sk-fila i:nth-child(3) { width: 56%; }
  .sk-fila:nth-of-type(2n) i:nth-child(1) { width: 58%; } .sk-fila:nth-of-type(2n) i:nth-child(2) { width: 70%; }
  .sk-fila:nth-of-type(2) i { animation-delay: -.25s; } .sk-fila:nth-of-type(3) i { animation-delay: -.5s; }
  @keyframes sk-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }

  /* ===== Botón Entrar: estados cargando / correcto / error (JS: loginEstado, loginRipple) ===== */
  button.btn-login { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; isolation: isolate; }
  button.btn-login > .bl-txt, button.btn-login > .bl-spin { position: relative; z-index: 2; }
  .btn-login .bl-txt { display: inline-block; transition: opacity .18s ease, transform .25s cubic-bezier(.2,.9,.3,1.1); }
  .btn-login .bl-spin { width: 0; height: 18px; opacity: 0; margin-right: -10px; transform: scale(.4); transition: width .25s ease, opacity .2s ease, margin .25s ease, transform .25s cubic-bezier(.2,.9,.3,1.2); }
  button.btn-login .bl-check { z-index: 2; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
  /* Destello que cruza el botón mientras verifica */
  button.btn-login::before { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
  /* Ondas al pulsar (nacen en el punto del clic) */
  .bl-ripples { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: inherit; }
  .bl-rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(0); animation: bl-onda .65s ease-out forwards; }
  @keyframes bl-onda { to { transform: scale(1); opacity: 0; } }
  /* Relleno verde que se expande desde el centro al entrar */
  button.btn-login::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; z-index: 1; border-radius: 50%; background: var(--positive); transform: scale(0); pointer-events: none; }

  button.btn-login.bl-cargando { pointer-events: none; cursor: progress; box-shadow: 0 0 0 3px rgba(62,207,131,.18), 0 6px 22px rgba(62,207,131,.18); animation: bl-pulso 1.6s ease-in-out infinite; }
  button.btn-login.bl-cargando::before { opacity: 1; animation: bl-barrido 1.15s ease-in-out infinite; }
  button.btn-login.bl-cargando .bl-spin { width: 18px; opacity: 1; margin-right: 0; transform: none; animation: bl-gira .75s linear infinite; }
  @keyframes bl-gira { to { transform: rotate(360deg); } }
  @keyframes bl-barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  @keyframes bl-pulso { 0%, 100% { box-shadow: 0 0 0 3px rgba(62,207,131,.14), 0 6px 22px rgba(62,207,131,.12); } 50% { box-shadow: 0 0 0 6px rgba(62,207,131,.22), 0 8px 26px rgba(62,207,131,.28); } }

  button.btn-login.bl-ok { pointer-events: none; border-color: var(--positive); color: #06271a; animation: bl-rebote .5s cubic-bezier(.2,.9,.3,1.3); }
  button.btn-login.bl-ok::after { animation: bl-llena .55s cubic-bezier(.3,.7,.2,1) forwards; }
  button.btn-login.bl-ok .bl-txt { opacity: 0; transform: translateY(10px) scale(.8); }
  button.btn-login.bl-ok .bl-spin { width: 0; opacity: 0; margin-right: -10px; }
  button.btn-login.bl-ok .bl-check { opacity: 1; animation: bl-trazo .4s ease-out .22s forwards; }
  @keyframes bl-llena { to { transform: scale(40); } }
  @keyframes bl-trazo { to { stroke-dashoffset: 0; } }
  @keyframes bl-rebote { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }

  button.btn-login.bl-er { border-color: var(--danger); animation: bl-error .5s cubic-bezier(.36,.07,.19,.97), bl-rojo .9s ease-out; }
  @keyframes bl-error { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
  @keyframes bl-rojo { 0% { background: var(--danger); } 100% { background: var(--primary); } }
  #login-screen .card.bl-card-er { animation: bl-card-er .45s ease; }
  @keyframes bl-card-er { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
  @media (prefers-reduced-motion: reduce) {
    button.btn-login, button.btn-login::before, button.btn-login::after, .btn-login .bl-spin, .bl-rip, #login-screen .card.bl-card-er { animation: none !important; }
    button.btn-login.bl-ok::after { transform: scale(40); }
    button.btn-login.bl-ok .bl-check { stroke-dashoffset: 0; }
  }

  /* ===== S4 · De login a panel (JS: entrarAlPanel) ===== */
  #login-screen.login-sale { animation: login-sale .22s ease-in forwards; pointer-events: none; }
  @keyframes login-sale { to { opacity: 0; transform: translateY(-14px) scale(.96); } }
  #app.app-entra .topbar { animation: app-baja .42s cubic-bezier(.2,.8,.2,1) both; }
  #app.app-entra .tabs { animation: app-izq .45s cubic-bezier(.2,.8,.2,1) .08s both; }
  #app.app-entra .role-chip { animation: chip-revela .6s cubic-bezier(.2,.8,.2,1) .1s both; }
  #app.app-entra #inactividad-contador { animation: app-sube .45s cubic-bezier(.2,.8,.2,1) .22s both; }
  #app.app-entra .topbar-salir { animation: app-sube .45s cubic-bezier(.2,.8,.2,1) .34s both; }
  @keyframes chip-revela { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
  @keyframes app-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes app-baja { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
  @keyframes app-izq { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

  /* ===== S5 · Menú lateral: una sola píldora que se desliza hasta la opción activa (JS: posDeslizador) ===== */
  .tabs > .pill { border-radius: var(--radius-sm); z-index: 0; background: var(--positive-soft);
    --desliza-dur: .4s; --desliza-ease: cubic-bezier(.2,.9,.3,1.1); }
  /* Barra lateral verde: al viajar la píldora se esconde y vuelve a crecer desde el centro con rebote. */
  .tabs > .pill::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--positive); }
  .tabs > .pill.viaja::before { animation: pill-barra .55s cubic-bezier(.34,1.5,.64,1) both; }
  @keyframes pill-barra { 0%, 35% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
  .tabs.con-pill button { z-index: 1; }
  .tabs.con-pill button.active, .tabs.con-pill button.active:hover { background: transparent; }
  .tabs.con-pill button::before { display: none; }

  /* ===== S6 · Estados vacíos (estadoVacio) ===== */
  .vacio { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 30px 16px; }
  .vacio.vacio-c { padding: 18px 12px; }
  .vacio-ic { position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--positive-soft); color: var(--positive); margin-bottom: 4px; }
  .vacio-ic::after { content: ''; position: absolute; inset: 0; border-radius: 16px; border: 1px solid var(--positive); pointer-events: none; animation: vacio-onda 1.1s ease-out .5s both; }
  .vacio-ic svg { width: 28px; height: 28px; display: block; }
  .vacio-ic svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vacio-trazo .7s ease forwards; }
  .vacio-ic svg *:nth-child(2) { animation-delay: .12s; } .vacio-ic svg *:nth-child(3) { animation-delay: .24s; } .vacio-ic svg *:nth-child(4) { animation-delay: .36s; }
  .vacio h3 { margin: 0; font-size: 16px; animation: fila-sube .4s .35s both; }
  .vacio p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 46ch; animation: fila-sube .4s .45s both; }
  .vacio button { margin-top: 10px; animation: fila-sube .4s .55s both; }
  @keyframes vacio-trazo { to { stroke-dashoffset: 0; } }
  @keyframes vacio-onda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }

  /* Botón ojo (mostrar/ocultar contraseña): ícono SVG; la raya se dibuja al mostrar la contraseña */
  button.btn-ojo {
    position: absolute; right: 5px; top: 50%; margin-top: 0; transform: translateY(-50%);
    width: 36px; height: 32px; min-height: 0; padding: 0; display: grid; place-items: center;
    background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: var(--radius-sm);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  }
  button.btn-ojo:hover { color: var(--text); background: rgba(255,255,255,.06); border-color: var(--border-strong); box-shadow: none; }
  button.btn-ojo:active { transform: translateY(-50%) scale(.92); }
  button.btn-ojo:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  button.btn-ojo.ojo-on { color: var(--positive); }
  button.btn-ojo svg { width: 18px; height: 18px; display: block; overflow: visible; }
  button.btn-ojo .ojo-raya { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease; }
  button.btn-ojo.ojo-on .ojo-raya { stroke-dashoffset: 0; }

  /* A1 · Botón de cierre: círculo discreto en la esquina; la X gira 90° al pasar el cursor */
  .modal-box { position: relative; }
  .modal-box > h2 { padding-right: 40px; }
  .modal-x {
    position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0;
    border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
    background: rgba(255,255,255,.05); color: var(--muted);
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
  }
  .modal-x svg { width: 16px; height: 16px; display: block; transition: transform .25s cubic-bezier(.2,.9,.3,1.2); }
  .modal-x:hover { background: rgba(255,255,255,.11); color: var(--text); }
  .modal-x:hover svg { transform: rotate(90deg); }
  .modal-x:active { transform: scale(.9); }
  .modal-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .modal-box.rdb-box > .modal-x { top: 24px; right: 20px; }
  .modal-box.rdb-box .rdb-head { padding-right: 64px; }

  /* B4 · Entrada en resorte: los bloques crecen desde 94 % con un pequeño rebote (--i lo asigna escalonarModal) */
  .modal-box .esc { animation: esc-resorte .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
  @keyframes esc-resorte { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
  @media (max-width: 520px) { .modal-actions button { flex: 1 1 0; min-width: 0; } #toast-root { left: 12px; right: 12px; align-items: stretch; } .toast { max-width: none; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .rdb-spin { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 780px) {
    .layout { flex-direction: column; align-items: stretch; }
    .tabs { flex-direction: row; width: 100%; overflow-x: auto; position: relative; top: auto; }
    .tabs button { width: auto; flex-shrink: 0; justify-content: center; text-align: center; padding-left: 14px; padding-right: 14px; }
  }
  @media (max-width: 720px) {
    .topbar { padding: 12px 16px; }
    .logo-word { font-size: 17px; }
    .tagline { display: none; }
  }
  @media (max-width: 560px) {
    .logo-mark { width: 36px; height: 36px; border-radius: 9px; }
    .topbar-right { flex-shrink: 1; gap: 8px; }
    .role-chip { padding: 0 9px; gap: 6px; letter-spacing: .06em; font-size: 11px; }
    #inactividad-contador { padding: 0 10px; }
    .tm-ic { display: none; }
    .container, #config-screen, #login-screen { padding-left: 12px; padding-right: 12px; }
    .card { padding: 16px; }
    button { font-size: 13.5px; }
    .row > * { min-width: 0; flex-basis: 100%; }
    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    td { border-bottom: none; padding: 4px 0; }
    tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  }

  @media (prefers-reduced-motion: reduce) {
    .card { animation: none !important; }
    * { transition-duration: 0.01ms !important; }
  }

  /* ============ MARCA DE AGUA "残" — presente en todo el panel ============ */
  body::after { content: "残"; position: fixed; right: 5vw; bottom: -6vmin; z-index: 50; font-family: var(--kanji); font-weight: 700; font-size: 62vmin; line-height: 1; color: rgba(62,207,131,.06); pointer-events: none; user-select: none; animation: kanji-in 1.4s var(--ease) both; }
  @keyframes kanji-in { from { opacity: 0; transform: translateY(24px); } }
  @media (max-width: 760px) { body::after { right: -8vw; font-size: 80vmin; } }

  /* ============ LOGIN (diseño de Panel Admin: sin marco, alineado a la izquierda, marca Michroma) ============ */
  #login-screen { position: relative; z-index: 60; max-width: none; margin: 0; padding: 24px; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; }
  #login-screen:not(.hidden) { display: flex; }
  #login-screen .card { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 24px; width: 92%; max-width: 420px; text-align: left; animation: none; }
  #login-screen .login-inner { animation: login-in .7s .1s var(--ease) both; }
  @keyframes login-in { from { opacity: 0; transform: translateY(10px); } }
  #login-screen .logo-mark-lg { width: 60px; height: 60px; margin: 0 0 18px; }
  #login-screen .logo-mark-lg svg { width: 34px; height: 34px; }
  #login-screen .login-title { margin: 0 0 8px; font-size: 22px; line-height: 1.1; font-weight: 400; }
  #login-screen .login-title .logo-word { font-size: 22px; }
  #login-screen .login-sub { margin: 0 0 26px; font-size: 15px; color: var(--muted); }
  #login-screen label { margin: 18px 0 8px; font-size: 13px; }
  #login-screen label:first-of-type { margin-top: 0; }
  #login-screen input { height: 58px; min-height: 58px; padding: 0 18px; font-size: 18px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); letter-spacing: .02em; transition: border-color .2s, box-shadow .2s; }
  #login-screen input:hover { border-color: var(--border-strong); }
  #login-screen input:focus, #login-screen input:focus-visible { border-color: var(--positive); border-radius: 14px; box-shadow: 0 0 0 4px rgba(62,207,131,.18); }
  #login-screen button.btn-ojo { right: 8px; }
  #login-screen #login-btn { height: 54px; min-height: 54px; margin-top: 24px; font-size: 16px; border-radius: 14px; }
  #login-screen .msg { margin-top: 14px; }
  @media (max-width: 760px) { #login-screen .login-title, #login-screen .login-title .logo-word { font-size: 18px; } }

  @media (prefers-reduced-motion: reduce) {
    body::after, #login-screen .login-inner { animation: none !important; }
  }


/* ---- Antes eran style="..." sueltos en el HTML (la CSP ya no permite estilos en línea). !important = misma prioridad que tenían en línea. ---- */
.u-logo-centro { display:flex !important; justify-content:center !important; margin-bottom:16px !important; }
.u-pos-rel { position:relative !important; }
.u-pad-der-56 { padding-right:56px !important; }
.u-header-nombre { font-weight:600 !important; font-size:13px !important; color:var(--text) !important; }
.u-pad-sup-26 { padding-top:26px !important; }

/* Campana de coincidencias de IP (misma apariencia que las campanas del panel Streamer) */
.topbar .campana, .topbar .campana:hover, .topbar .campana:focus, .topbar .campana:active { position: relative; width: 46px; height: 46px; min-height: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; transform: none; color: var(--muted-strong, #b7bec9); transition: color .15s ease; }
.topbar .campana svg { width: 28px; height: 28px; }
.topbar .campana:hover, .topbar .campana:focus-visible { color: var(--positive); }
.topbar .campana.con-coincidencias, .topbar .campana.con-coincidencias:hover { color: var(--amber); }
.topbar .campana-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: #2a1d00; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #161a20); }
.topbar .campana-badge.hidden { display: none; }
.chip-nueva { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 11px; font-weight: 600; vertical-align: middle; }