/* Fuentes locales en fonts/ (mismas que Panel Developer): 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; --card: #1e232b; --card2: #252b34; --border: #2c3340; --border-strong: #3c4454; --text: #eef1f4; --muted: #8c96a3; --muted-strong: #b7bec9; --muted-dim: #667080; /* texto de registros revertidos: más oscuro que --muted */ --reverted-bg: rgba(0,0,0,.24); /* fondo de registros revertidos: más oscuro que el card */ /* --accent / --accent2 se mantienen como nombres (los usa el JS inline), pero ahora apuntan al verde del logo y al rojo de marca. */ --accent: #0f5132; --accent-strong: #0c4128; --accent-ink: #eafff2; --accent-soft: rgba(15,81,50,.18); --accent2: #ff6b57; --accent2-soft: rgba(255,107,87,.14); --positive: #3ecf83; --positive-soft: rgba(62,207,131,.14); --amber: #e8b34c; --amber-soft: rgba(232,179,76,.14); --info: #6ea8fe; --info-soft: rgba(110,168,254,.14); --link: #6ea8fe; --brand-cyan: #2fd0c8; --input-bg: #12151b; --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); /* Alias con los nombres del panel Developer: la capa de animaciones e interacción (más abajo) es la misma en ambos archivos. */ --bg-elevated: #1b2029; --primary: var(--accent); --primary-strong: var(--accent-strong); --primary-ink: var(--accent-ink); --primary-soft: var(--accent-soft); --danger: var(--accent2); --danger-soft: var(--accent2-soft); } * { 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 ============ */ header { 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: 10; } header .info { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); } header .campana, header .campana:hover, header .campana:focus, header .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); transition: color .15s ease; } header .campana svg { width: 28px; height: 28px; } header .campana:hover, header .campana:focus-visible { color: var(--positive); } header .campana.con-reclamos, header .campana.con-reclamos:hover { color: var(--accent2); } header .campana.con-retiros, header .campana.con-retiros:hover { color: var(--positive); } header .campana-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent2); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #0f1216); } header .campana-badge.retiros { background: var(--positive); color: #062514; } header .campana.con-coincidencias, header .campana.con-coincidencias:hover { color: var(--amber); } header .campana-badge.coincidencias { background: var(--amber); color: #2a1d00; } /* Detalle de la notificación (de qué caja son los pedidos): aparece al pasar el mouse o enfocar la campanita */ header .campana-detalle { display: none; position: absolute; top: 100%; right: 0; z-index: 60; min-width: 220px; max-width: 300px; padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--text); background: var(--card2); border: 1px solid var(--border-strong); border-radius: var(--radius-md, 10px); box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: none; } header .campana:hover .campana-detalle, header .campana:focus-visible .campana-detalle { display: block; } header .campana-detalle b { display: block; margin-bottom: 4px; } header .campana-detalle .cd-fila { display: flex; justify-content: space-between; gap: 12px; } header .campana-detalle .cd-mod { color: var(--accent2); } /* Filtro de cajas (Retiros solicitados / Reclamos) */ .filtro-cajas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .filtro-cajas .filtro-titulo { font-size: 12px; color: var(--muted-strong); margin-right: 4px; } .filtro-cajas input[type="text"] { max-width: 240px; } /* Reclamos: lista a la izquierda, detalle del movimiento citado a la derecha (misma línea vertical que .vr-grid). */ .rc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: 4px; align-items: start; } .rc-grid .rc-izq { padding-right: 20px; min-width: 0; } .rc-grid .rc-der { padding-left: 20px; border-left: 1px solid var(--border-strong); min-width: 0; position: sticky; top: 12px; } .rc-fila { padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; transition: background .15s, border-color .15s; } .rc-fila.sel { background: var(--card2); border-left-color: var(--positive); } .rc-cod { display: inline; margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; font: inherit; color: var(--positive); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .rc-cod:hover, .rc-cod:focus-visible { color: var(--text); } .rc-vacio { color: var(--muted); font-size: 13px; padding: 24px 8px; text-align: center; } .rc-detalle { display: flex; flex-direction: column; gap: 14px; animation: fc-entra .2s ease-out both; } .rc-detalle h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted-strong); } .rc-detalle .rc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; } .rc-detalle .rc-bloque + .rc-bloque { padding-top: 14px; border-top: 1px solid var(--border); } .rc-detalle .rc-texto { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .rc-detalle .balance-detalle-row span { color: var(--muted); } .rc-detalle .balance-detalle-row b { text-align: right; overflow-wrap: anywhere; white-space: normal; } @media (max-width: 900px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } .rc-grid .rc-izq { padding-right: 0; } .rc-grid .rc-der { padding-left: 0; border-left: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-strong); position: static; } } @media (prefers-reduced-motion: reduce) { .rc-detalle { animation: none; } } /* Detalle de saldos del viewer: mismo formato que su tab Depósito-Retiro (publico.html). */ .balance-detalle-list { display: flex; flex-direction: column; gap: 5px; } .balance-detalle-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 5px; } .balance-detalle-row:last-child { border-bottom: none; padding-bottom: 0; } .balance-detalle-row b { color: var(--muted-strong); font-weight: 600; white-space: nowrap; } .balance-detalle-row.total, .balance-detalle-row.total b { color: var(--text); } .balance-detalle-row.total { font-size: 13.5px; } /* Filtros de caja/viewer: radios con el marco deslizante de Crear Bet, en versión compacta (cada opción mide su texto). */ .filtro-cajas .radio-group.cf-radios { margin-top: 0; } .radio-group.cf-radios > .radio-option { flex: 0 0 auto; min-width: 0; align-items: center; white-space: nowrap; padding: 8px 14px; } .radio-group.cf-radios .radio-option input[type="radio"] { margin: 0; } .fc-slot { display: contents; } .fc-slot > * { animation: fc-entra .24s cubic-bezier(.2,.9,.3,1.2) both; transform-origin: left center; } @keyframes fc-entra { from { opacity: 0; transform: translateX(-10px) scale(.94); } to { opacity: 1; transform: none; } } .filtro-cajas .tv-buscar { width: 280px; max-width: 100%; } @media (prefers-reduced-motion: reduce) { .fc-slot > * { animation: none; } } /* Resumen del viewer (izquierda) + solicitud de retiro (derecha), separados por una línea vertical. */ .vr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin-top: 12px; } .vr-grid.sin-der { grid-template-columns: minmax(0, 1fr); } .vr-grid .vr-izq { padding-right: 20px; } .vr-grid.sin-der .vr-izq { padding-right: 0; } .vr-grid .vr-der { padding-left: 20px; border-left: 1px solid var(--border-strong); display: flex; flex-direction: column; gap: 16px; } .vr-solicitud { display: flex; flex-direction: column; gap: 10px; } .vr-solicitud + .vr-solicitud { padding-top: 16px; border-top: 1px solid var(--border); } .vr-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vr-acciones > * { margin: 0; min-width: 0; } .vr-acciones input.vr-monto { flex: 0 0 110px; width: 110px; min-height: 38px; padding: 7px 10px; font-size: 14px; } .vr-acciones input.vr-motivo { flex: 1 1 160px; min-height: 38px; padding: 7px 10px; font-size: 14px; } .vr-acciones label.file-pick.vr-archivo { flex: 1 1 140px; min-height: 38px; padding: 0 10px; } .vr-acciones button.small { flex: 0 0 auto; min-height: 38px; padding: 0 14px; white-space: nowrap; } @media (max-width: 900px) { .vr-grid { grid-template-columns: minmax(0, 1fr); } .vr-grid .vr-izq { padding-right: 0; } .vr-grid .vr-der { padding-left: 0; border-left: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-strong); } } /* Sub-tab Viewers: buscador y botones en una sola línea, todos de la misma altura y alineados. */ .vl-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .vl-barra > * { margin: 0; } .vl-reportes { margin-top: 22px; border-top: 1px solid var(--border, rgba(255,255,255,.08)); padding-top: 16px; } .vl-reportes h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .vl-rep-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); } .vl-rep-fila:last-child { border-bottom: 0; } .vl-rep-fila button { margin: 0; min-height: 38px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .vl-barra input[type="text"] { flex: 1 1 280px; width: auto; max-width: 460px; min-height: 44px; box-sizing: border-box; } .vl-barra button { margin: 0; min-height: 44px; box-sizing: border-box; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } /* Historial del viewer: tablas por tipo (colapsables y paginadas) o lista cronológica, con el cuadre del saldo a la derecha. */ .hv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; margin-top: 12px; } .hv-aside { display: flex; flex-direction: column; gap: 16px; } .hv-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hv-der { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .hv-der > button { margin: 0; display: inline-flex; align-items: center; gap: 8px; } .hv-acc { display: flex; gap: 8px; flex-wrap: wrap; } .hv-acc button { margin: 0; } .hv-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .hv-seg button { margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted-strong); min-height: 34px; padding: 0 14px; font-size: 13px; } .hv-seg button.on { background: var(--accent); color: var(--accent-ink); } .hv-sec { background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; } .hv-sec > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; } .hv-sec > summary::-webkit-details-marker { display: none; } .hv-sec > summary:focus-visible { outline: 2px solid var(--positive); outline-offset: -2px; } .hv-ch { flex: 0 0 auto; color: var(--muted); transition: transform .15s; } .hv-sec[open] .hv-ch { transform: rotate(90deg); } .hv-letra { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .hv-letra-mini { color: var(--muted-strong); } .hv-tot { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: 'Fragment Mono', ui-monospace, monospace; font-size: 13px; } .hv-t { font-size: 13px; } .hv-t th, .hv-t td { padding: 6px 10px; vertical-align: middle; } .hv-t th.n, .hv-t td.n { text-align: right; white-space: nowrap; font-family: 'Fragment Mono', ui-monospace, monospace; } .hv-t td.tiny { white-space: nowrap; color: var(--muted-strong); } .hv-t tfoot td { font-weight: 600; background: var(--card); border-top: 2px solid var(--border-strong); border-bottom: 0; } .hv-t tfoot tr.hv-res td { font-weight: 400; color: var(--muted); border-top: 1px dashed var(--border-strong); background: transparent; } .hv-in { color: var(--positive); } .hv-out { color: #d0867f; } /* rojo apagado: los negativos no gritan como --accent2 */ .hv-cero { color: var(--muted); } .hv-tipo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } @media (max-width: 1100px) { .hv-grid { grid-template-columns: minmax(0, 1fr); } } /* Etiqueta con el nombre del titular de la caja de un pedido. El color (--cc) lo pone chipCaja(): uno por receptor (Streamer / cada moderador). */ .chip-caja { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--cc, var(--muted-strong)); border: 1px solid var(--cc, var(--border-strong)); background: var(--card2); background: color-mix(in srgb, var(--cc, transparent) 14%, var(--card2)); } /* Buscador de moderadores con menú "glide": el menú sale de su esquina y UN solo resaltado se desliza entre filas, recordando dónde quedó (al reabrir parte de ahí). Mismos colores del panel: --input-bg, --border-strong, --positive. */ .gs { position: relative; display: inline-block; width: 300px; max-width: 100%; } .filtro-cajas .gs .gs-input { width: 100%; max-width: none; padding-right: 36px; } .gs .gs-flecha { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--muted); pointer-events: none; transition: transform .2s ease, color .15s ease; } .gs.abierto .gs-flecha { transform: rotate(180deg); color: var(--positive); } .gs .gs-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 6px; max-height: 260px; overflow-y: auto; background: var(--card2); border: 1px solid var(--border-strong); border-radius: var(--radius-md, 10px); box-shadow: 0 12px 28px rgba(0,0,0,.45); transform-origin: top left; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.82) translateY(-6px); transition: opacity .14s ease, transform .2s cubic-bezier(.2,.9,.3,1.25), visibility 0s linear .2s; } .gs.abierto .gs-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .gs .gs-hl { position: absolute; left: 6px; right: 6px; top: 0; height: 0; border-radius: 8px; background: var(--positive-soft); opacity: 0; pointer-events: none; will-change: transform, height; } .gs .gs-hl.anima { transition: transform .22s cubic-bezier(.3,.9,.3,1), height .22s cubic-bezier(.3,.9,.3,1), opacity .15s ease; } .gs .gs-op { position: relative; z-index: 1; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--muted-strong); cursor: pointer; user-select: none; transition: color .15s ease; } .gs .gs-op.activa { color: var(--text); } .gs .gs-op.elegida { color: var(--positive); font-weight: 600; } .gs .gs-vacio { padding: 10px 12px; font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .gs .gs-menu, .gs .gs-hl.anima, .gs .gs-flecha { transition: none; } } /* Distintivo de rol: píldora cian (el color de "Bet"), sin borde, con punto que late (igual que el panel Developer) */ .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); } } /* 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); } } /* Cerrar sesión: el ícono gira 180° al pasar el cursor */ .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); } /* Con el menú lateral (igual que el panel Developer) el contenedor ya no se centra: va pegado a la izquierda y ocupa todo el ancho disponible, para que las tablas de varias columnas (moderadores, apostadores, historial...) no queden apretadas ni fuercen scroll horizontal. */ .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); } 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; } /* El texto nativo "Ningún archivo seleccionado" hereda el font-size del input -- se achica acá puntualmente para que un input[type=file] quepa en una fila junto a los demás campos. */ input[type="file"] { font-size: 11.5px; padding: 10px 8px; } /* Selector de archivo propio (el input nativo queda oculto): evita el texto «Ningún archivo seleccionado», que además reaparecía tras guardar. Muestra un mensaje genérico y, al elegir, el nombre del archivo. */ label.file-pick { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: var(--input-bg); color: var(--muted-strong); font-size: 12.5px; font-weight: 500; cursor: pointer; text-transform: none; transition: border-color .15s ease, color .15s ease; } label.file-pick:hover { border-color: var(--positive); color: var(--text); } label.file-pick svg { flex-shrink: 0; color: var(--positive); } label.file-pick .fp-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } label.file-pick.con-archivo { border-style: solid; border-color: var(--positive); color: var(--text); } input[type="file"]:focus-visible + label.file-pick, label.file-pick:focus-within { outline: 2px solid var(--positive); outline-offset: 2px; } /* Interruptor on/off (reemplaza al checkbox). */ label.switch-row { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; text-transform: none; font-size: 12.5px; color: var(--muted-strong); } label.switch-row .sw-input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; pointer-events: none; } label.switch-row .sw-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); transition: background .18s ease; } label.switch-row .sw-track i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .18s ease; } label.switch-row .sw-input:checked + .sw-track { background: var(--positive); } label.switch-row .sw-input:checked + .sw-track i { transform: translateX(18px); } label.switch-row .sw-input:focus-visible + .sw-track { outline: 2px solid var(--positive); outline-offset: 2px; } /* QR dentro de la tarjeta de stream. */ .sc-pay-qr { display: flex; justify-content: center; flex-shrink: 0; } .sc-qr { width: 100%; max-width: 168px; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; padding: 6px; } /* Bloque único de depósitos, lo más bajo posible: título + número(s) a la izquierda, QR cuadrado a la derecha. La altura la fija el QR (el título ya no ocupa una fila propia). */ .sc-pay.sc-pay-compacto { margin-top: 12px; padding: 8px 10px; } .sc-pay-compacto .sc-pay-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sc-pay-compacto .sc-pay-izq { flex: 1 1 auto; min-width: 0; } .sc-pay-compacto .sc-pay-title { margin-bottom: 6px; } .sc-pay-compacto .sc-pay-row + .sc-pay-row { margin-top: 6px; padding-top: 6px; } .sc-pay-compacto .sc-pay-ico { width: 30px; height: 30px; border-radius: 9px; } .sc-pay-compacto .sc-phone { font-size: 17px; } .sc-pay-compacto .sc-pay-qr { flex-shrink: 0; } .sc-pay-compacto .sc-manage { margin-top: 6px; font-size: 12px; } .sc-pay-compacto .sc-pay-qr .sc-qr { display: block; width: 88px; height: 88px; max-width: 88px; aspect-ratio: 1; padding: 3px; border-radius: 8px; object-fit: contain; } input::placeholder { color: #5c6472; } input:hover, select:hover { border-color: #4c5567; } input:focus, select:focus { border-color: var(--positive); } /* Mismo motivo que en el panel Developer: cuando cada campo de una fila va envuelto en su propio
, label:first-of-type le borra el margin-top a TODAS las labels de la fila (cada una es "primera" dentro de su propio div), no solo a la primera fila del formulario. Poniendo el espaciado acá en vez de en cada label, una fila que sigue a otra siempre queda separada. */ .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .row > * { flex: 1; min-width: 140px; } .row:first-child { margin-top: 0; } button { margin-top: 14px; padding: 12px 18px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; font-size: 14px; min-height: 44px; font-family: var(--font-accent); 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 (secondary, danger, pestañas, íconos) 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); } :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); } :where(button:not(.secondary):not(.danger):hover) { background: var(--accent-strong); border-color: var(--accent-strong); } button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); font-weight: 600; } button.secondary:hover { background: var(--card2); border-color: var(--positive); } button.danger { background: transparent; color: var(--accent2); border: 1px solid rgba(255,107,87,.4); font-weight: 600; } button.danger:hover { background: var(--accent2-soft); border-color: var(--accent2); } 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); } button.small { padding: 8px 14px; font-size: 12.5px; min-height: 36px; margin-top: 0; } /* Ídem panel Developer: un botón "small" que va SOLO como acción final de un formulario (hijo directo de .card) necesita su espacio de vuelta; uno que va en línea dentro de una tabla o grupo de botones debe seguir en 0 para no desalinearse -- por eso el selector más específico, no se toca la regla de arriba. */ .card > button.small { margin-top: 14px; } button.full { width: 100%; margin-top: 16px; font-size: 16px; min-height: 50px; } button:disabled { opacity: .5; cursor: not-allowed; transform: none; } .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(62,207,131,.3); } .msg.error { display: flex; background: var(--accent2-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; } /* Bets del periodo: línea segmentada entre un lote y la fila siguiente (otro lote o bet sin lote) */ tr.lote-fin td { border-bottom: 1px dashed var(--muted); } 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; } .table-wrap { overflow-x: auto; margin: 0 -4px; } .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.abierta, .badge.activo, .badge.verificado, .badge.confirmado, .badge.pagado, .badge.ganada, .badge.confirmada, .badge.ok { background: var(--positive-soft); color: var(--positive); } .badge.pendiente, .badge.solicitado, .badge.cerrada, .badge.suspendido { background: var(--amber-soft); color: var(--amber); } .badge.registrado { background: var(--amber-soft); color: var(--amber); } .badge.sin_registrar { background: var(--card2); color: var(--muted); } .badge.resultado_registrado, .badge.liquidado, .badge.subida, .badge.anulada { background: var(--info-soft); color: var(--info); } .badge.rechazado, .badge.perdida { background: var(--accent2-soft); color: var(--accent2); } /* ============ LAYOUT: menú lateral a la izquierda + contenido (igual que el panel Developer) ============ */ .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: 90px; } .tabs button { margin-top: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); min-height: 40px; border-color: transparent; width: 100%; text-align: left; padding-left: 14px; display: flex; align-items: center; gap: 11px; overflow: hidden; isolation: isolate; font-weight: 600; } .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; box-shadow: none; } .tabs button.active, .tabs button.active:hover { 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); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .subtabs button:hover:not(.active) { background: var(--card2); color: var(--text); border-color: #4c5567; box-shadow: none; } /* Segundo nivel de sub-tabs (subrayado), dentro del destinatario elegido en el tab Pagar. */ .subtabs-sec { display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 2px 0 16px; position: relative; } .subtabs-sec button, .subtabs-sec button:hover, .subtabs-sec button:not(.secondary):not(.danger):hover { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; transform: none; box-shadow: none; color: var(--muted-strong); padding: 8px 2px; min-height: 0; margin: 0 0 -1px; font-size: 13.5px; font-weight: 600; } .subtabs-sec button:hover { color: var(--text); } .subtabs-sec button.active, .subtabs-sec button.active:hover, .subtabs-sec button.active:not(.secondary):not(.danger):hover { color: var(--text); border-bottom-color: transparent; } /* el subrayado lo dibuja el indicador deslizante (.ind) */ .subtabs button.active, .subtabs button.active:hover { background: transparent; color: var(--text); border-color: transparent; font-weight: 700; box-shadow: none; } .hidden { display: none !important; } /* Selector inicial de tipo de liquidación (tab Bet -> Crear Bet) */ /* Variante "tarjeta grande" del radio-option (título + descripción larga). El borde/fondo de la opción marcada lo pone el marco deslizante (.radio-group > .marco), como en el panel Developer. */ .radio-option.opcion-liq { min-width: 220px; gap: 12px; padding: 16px; text-align: left; text-transform: none; color: var(--text); } .opcion-liq .radio-option-text b { font-size: 15px; margin-bottom: 4px; color: var(--text); font-family: var(--font-display); } .opcion-liq .radio-option-text p { margin: 0; } .opcion-liq input[type="radio"] { margin-top: 4px; } .liq-acciones { display: flex; justify-content: flex-end; margin-top: 16px; } .chip-liq { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-family: var(--font-accent); white-space: nowrap; } .btn-cierre-lote { background: var(--amber-soft) !important; color: var(--amber) !important; border: 1px solid rgba(232,179,76,.4) !important; padding: 6px 12px !important; font-size: 11.5px !important; min-height: 0 !important; margin-top: 0 !important; font-weight: 700 !important; } .btn-cierre-lote:hover { background: rgba(232,179,76,.24) !important; } /* Card de lote: mismo borde que los demás cards. Solo el card ACTIVO (lote abierto o bet abierta) se resalta con borde verde para identificarlo de un vistazo. */ .card-activo { border-color: var(--positive); box-shadow: 0 0 0 1px rgba(62,207,131,.28), var(--shadow-card); } .btn-tarjeta { display: inline-flex; align-items: center; gap: 7px; } .btn-tarjeta svg { flex-shrink: 0; } /* Diálogo de confirmación propio (reemplaza al confirm() del navegador) */ .cm-overlay { position: fixed; inset: 0; background: rgba(6,8,11,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; } .cm-dialog { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 24px; animation: cm-entrar .16s ease both; } .cm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .cm-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(232,179,76,.35); } .cm-title { margin: 0; font-size: 17px; font-family: var(--font-accent); font-weight: 700; color: var(--text); line-height: 1.25; } .cm-body { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--muted-strong); } .cm-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } .cm-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); } .cm-list li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } .cm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .cm-actions button { margin-top: 0; } .cv-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); animation: cv-datos-in .24s ease-out; } .cv-datos div > span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; } .cv-datos div > b { font-size: 13.5px; font-weight: 600; } @keyframes cv-datos-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cv-datos { animation: none; } } .cm-actions .cm-ok { background: var(--amber); border-color: var(--amber); color: #1b1305; } .cm-actions .cm-ok:hover { background: #f0c063 !important; border-color: #f0c063 !important; } .cm-peligro .cm-ico { background: var(--accent2-soft); color: var(--accent2); border-color: rgba(255,107,87,.4); } .cm-peligro .cm-list li::before { background: var(--accent2); } .cm-peligro { border-color: rgba(255,107,87,.35); } .cm-actions .cm-ok.cm-ok-peligro { background: var(--accent2); border-color: var(--accent2); color: #2a0b06; } .cm-actions .cm-ok.cm-ok-peligro:hover { background: #ff8272 !important; border-color: #ff8272 !important; } /* Diálogo de reversa (motivo obligatorio) y filas "original + reversión" del historial */ .rv-resumen { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--card2); border: 1px solid var(--border); display: grid; gap: 6px; } .rv-resumen div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .rv-resumen span:first-child { color: var(--muted); } .rv-resumen span:last-child { color: var(--text); font-weight: 600; text-align: right; } .rv-label { margin-top: 0; } .rv-texto { width: 100%; min-height: 84px; resize: vertical; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text); font-size: 14.5px; font-family: inherit; line-height: 1.45; transition: border-color .15s ease, box-shadow .15s ease; } .rv-texto:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-soft); } .rv-texto.rv-error { border-color: var(--accent2); } .rv-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--muted); min-height: 18px; } .rv-pie .rv-err { color: var(--accent2); } .rv-nota { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; } /* Registro revertido: dos filas alineadas (original arriba, reversión abajo) en tono gris, sin llamar la atención. Una sola línea segmentada continua las separa, desde la columna "Tipo" hacia la derecha. */ tr.par-a td, tr.par-b td { background: var(--reverted-bg); color: var(--muted-dim); } tr.par-a td:first-child, tr.par-b td:first-child { box-shadow: inset 3px 0 0 var(--border-strong); } tr.par-a td { border-bottom: 1px dashed var(--border-strong); padding-bottom: 9px; } tr.par-a td:first-child { border-bottom-color: transparent; } tr.par-b td { padding-top: 9px; } .par-tachado { text-decoration: line-through; text-decoration-color: var(--muted-dim); } .par-etiqueta { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-family: var(--font-accent); background: rgba(0,0,0,.3); color: var(--muted-dim); border: 1px solid var(--border); white-space: nowrap; } .par-estado { margin-left: 6px; font-size: 12px; color: var(--muted-dim); white-space: nowrap; } .card-lote-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .mercado-item { padding: 12px 0; border-bottom: 1px solid var(--border); } .mercado-item:last-child { border-bottom: none; } .card-lote .mercado-item { padding-left: 12px; border-left: 2px solid var(--border-strong); } /* Manage Bets: cada bet es una grilla de 3 columnas: contenido | panel | acciones. La columna de acciones (Simular / Ver proyección / Tarjeta...) queda SIEMPRE pegada al borde derecho y con el mismo ancho, esté o no abierto el panel. El panel (proyección o simulación) se abre como columna propia entre el contenido y las acciones, separado del contenido por una línea vertical. */ .mercado-item { display: grid; grid-template-columns: minmax(0, 1fr) 136px; column-gap: 16px; align-items: start; } .mercado-item.con-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 136px; } .mi-cuerpo { min-width: 0; grid-column: 1; } .mi-panel { grid-column: 2; border-left: 1px solid var(--border-strong); padding-left: 16px; min-width: 0; align-self: stretch; } .mi-panel[hidden] { display: none; } .mi-acciones { grid-column: -2 / -1; display: flex; flex-direction: column; gap: 6px; } .mi-acciones > button { width: 100%; justify-content: flex-start; text-align: left; white-space: nowrap; } .mi-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .mi-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .mi-panel-head b { font-size: 13px; color: var(--muted-strong); } .mi-panel-head button { min-height: 28px; padding: 2px 10px; } @media (max-width: 720px) { .mercado-item, .mercado-item.con-panel { grid-template-columns: minmax(0, 1fr) auto; } .mi-panel { grid-column: 1 / -1; grid-row: 2; border-left: none; padding-left: 0; border-top: 1px solid var(--border-strong); margin-top: 12px; padding-top: 12px; } } .mi-meta { margin: 3px 0 0; } .mi-opciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .mi-opcion-chip { background: var(--card2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12.5px; color: var(--muted-strong); } .mi-opcion-cuota { color: var(--muted); font-weight: 700; } /* Cierre selectivo: opción que ya no recibe apuestas (el resto del mercado sigue abierto) */ .mi-opcion-chip.cerrada { opacity: .65; border-style: dashed; } .mi-opcion-chip.cerrada b { text-decoration: line-through; } .mi-opcion-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-left: 4px; } .mi-opcion-abrir { margin-left: 6px; padding: 0 6px; min-height: 0; font-size: 11px; line-height: 1.6; } .cs-lista label { display: flex; gap: 10px; align-items: center; margin: 8px 0 0; cursor: pointer; text-transform: none; } .cs-lista input { width: auto; min-height: 0; } .mi-resultado { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .mi-resultado select { width: auto; min-width: 200px; display: inline-block; min-height: 36px; padding: 6px 10px; font-size: 12.5px; margin-top: 0; } .mi-resultado button { margin-top: 0; } /* Selector único de "estrategia de cierre" en Crear Bet / Reabrir mercado */ .radio-fila { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; text-transform: none; background: var(--card2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 14px; margin-top: 0; } .radio-fila input { width: auto; min-height: 0; margin: 0; } .radio-fila.disabled { opacity: .4; cursor: not-allowed; } /* Radio "plano": mismo comportamiento que .radio-fila pero sin fondo/rectángulo (Crear Bet -> "¿Cómo se cierra?" y "Tipo de pago máximo" no necesitan esa píldora). */ /* ===== Radios con marco deslizante (diseño y animación tomados del panel Developer) ===== JS: posDeslizador() -> un viaja hasta .radio-option.is-checked. */ .radio-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; position: relative; } /* Selector de caja (Capital): cada opción mide lo que su texto; si no caben (muchos mods) aparece scroll horizontal */ .radio-group.cp-cajas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-top: 0; padding-bottom: 8px; scrollbar-width: thin; } .radio-group.cp-cajas > .radio-option { flex: 0 0 auto; min-width: 0; white-space: nowrap; align-items: center; } .radio-group.vertical { flex-direction: column; flex-wrap: nowrap; margin-top: 8px; } .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, opacity .15s ease; margin: 0; text-transform: none; /* es un