/* ========================================================= RiosTec Comunidad — Panel del streamer (UI de producto). Identidad RiosTec: azul / blanco / negro. Mobile-first. BEM. Color/tipografía por variables CSS. Tokens propios de la UI de producto (no se mezclan con el sistema de temas del render). ========================================================= */ .rtc-panel { /* Una sola dirección: OSCURO gamer (tema.md §3, §8, §10). El panel logueado vive dentro de (shell oscuro), así que sus superficies deben ser navy elevado, nunca blanco. Estos tokens replican exactamente el set on-brand de [data-tema="fortnite"] (assets/comunidad.css) y el override ya correcto de .rtc-panel--login. UN solo sistema, el oscuro. */ --azul: #2f9bff; --azul-claro: #66c0ff; --azul-dim: rgba(47, 155, 255, 0.16); --negro: #06080f; --superficie: #0f1b2e; /* navy card (= login) sobre el shell oscuro */ --superficie-2: #16243b; /* superficie elevada 2: inputs, items, chips */ --borde: #27395a; /* borde sutil sobre navy */ --texto: #eaf2ff; /* texto principal claro (AA ~16:1 sobre navy) */ --texto-suave: #9fb3d1; /* texto secundario claro (AA sobre navy) */ --gris: #94a7c8; /* placeholders (tema.md §2) */ --ok: #3ddc97; /* éxito on-brand sobre oscuro */ --error: #ff6b76; /* error legible sobre navy (AA) */ --grad: linear-gradient(135deg, #2f9bff, #66c0ff); --radio: 14px; --radio-sm: 10px; --tap: 44px; font-family: 'Inter', system-ui, sans-serif; color: var(--texto); max-width: 720px; margin: 0 auto; } .rtc-panel *, .rtc-panel *::before, .rtc-panel *::after { box-sizing: border-box; } .rtc-panel [hidden] { display: none !important; } .rtc-panel--aviso { padding: 1.5rem; } .rtc-panel__aviso { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; color: var(--texto-suave); text-align: center; } /* --------------------------------------------------------- Tabs --------------------------------------------------------- */ .rtc-panel__tabs { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; padding: 3px; margin-bottom: 1.2rem; } .rtc-panel__tab { min-height: 40px; padding: 0 18px; border: 0; background: transparent; color: var(--texto-suave); font-weight: 600; font-size: 0.95rem; border-radius: 999px; cursor: pointer; } .rtc-panel__tab.is-active { background: var(--grad); color: #fff; } /* --------------------------------------------------------- "En vivo" switch --------------------------------------------------------- */ .rtc-panel__live { margin-bottom: 1rem; } .rtc-panel__switch { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; } .rtc-panel__switch input { width: 20px; height: 20px; accent-color: var(--azul); } .rtc-panel__switchlbl { font-weight: 600; } /* --------------------------------------------------------- Cabecera + botones --------------------------------------------------------- */ .rtc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .rtc-panel__h2 { font-size: 1.3rem; font-weight: 700; } .rtc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); color: var(--texto); font-family: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: none; transition: border-color 0.15s, transform 0.1s; } .rtc-btn:hover { border-color: var(--azul); } .rtc-btn:active { transform: scale(0.98); } .rtc-btn--primario { background: var(--grad); color: #fff; border-color: transparent; } .rtc-btn--mini { min-height: 36px; padding: 0 12px; font-size: 0.88rem; } .rtc-btn--peligro { color: var(--error); border-color: rgba(221,51,51,0.4); } /* --------------------------------------------------------- Lista de streams --------------------------------------------------------- */ .rtc-panel__lista { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; } .rtc-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--azul); border-radius: var(--radio-sm); padding: 12px 14px; } .rtc-item--cancelado { opacity: 0.55; border-left-color: #aaa; } .rtc-item__fecha { font-weight: 700; color: var(--azul); white-space: nowrap; font-size: 0.9rem; } .rtc-item__cuerpo { min-width: 0; } .rtc-item__titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rtc-item__meta { color: var(--texto-suave); font-size: 0.82rem; margin-top: 2px; } .rtc-item__acciones { display: flex; gap: 6px; } .rtc-item__acciones button { min-height: 36px; min-width: 36px; } .rtc-panel__vacio { color: var(--texto-suave); padding: 1rem 0; } /* --------------------------------------------------------- Formularios --------------------------------------------------------- */ .rtc-form { display: flex; flex-direction: column; gap: 1rem; } .rtc-campo { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; } .rtc-campo--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rtc-campo__lbl { font-weight: 600; font-size: 0.9rem; } .rtc-campo__in { min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); color: var(--texto); font-family: inherit; font-size: 1rem; width: 100%; } .rtc-campo__in::placeholder { color: var(--gris); opacity: 1; } .rtc-campo__in:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); } textarea.rtc-campo__in { min-height: 64px; resize: vertical; } /* select hereda fondo/borde/texto de .rtc-campo__in; color-scheme:dark hace que el menú nativo del UA y las opciones se rendericen oscuros (evita opciones blancas). */ select.rtc-campo__in { color-scheme: dark; } .rtc-campo__radios { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; } .rtc-campo__radios label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); } .rtc-foto__btn { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 16px; border: 1px dashed var(--borde); border-radius: var(--radio-sm); cursor: pointer; background: var(--superficie-2); } .rtc-plat-fila { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } .rtc-plat-fila select, .rtc-plat-fila input { min-height: var(--tap); } .rtc-form__estado { font-size: 0.9rem; min-height: 1.2em; } .rtc-form__estado.is-ok { color: var(--ok); } .rtc-form__estado.is-error { color: var(--error); } .rtc-form__pista, .rtc-form__pie { color: var(--texto-suave); font-size: 0.85rem; } /* --------------------------------------------------------- Modal del editor de stream --------------------------------------------------------- */ .rtc-modal { position: fixed; inset: 0; background: rgba(7, 12, 24, 0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; } .rtc-modal__caja { background: var(--superficie); border-radius: var(--radio); padding: 1.4rem; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .rtc-modal__tit { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; } .rtc-modal__acciones { display: flex; gap: 10px; justify-content: flex-end; } /* --------------------------------------------------------- Mi cuenta --------------------------------------------------------- */ .rtc-panel__sep { border: 0; border-top: 1px solid var(--borde); margin: 1.4rem 0; } .rtc-form__fuerza { color: var(--texto-suave); font-size: 0.85rem; min-height: 1.1em; } /* --------------------------------------------------------- Pantalla de login (misma variante oscura gamer que el panel logueado). Desde v0.2.8 el panel base (.rtc-panel) YA es oscuro, así que el login solo aporta sus tokens propios (acento/subtítulo) y su layout centrado; no necesita redefinir superficies ni inputs (los hereda iguales). Un solo sistema oscuro. --azul-acento sube el azul para que llegue a contraste AA sobre oscuro. --texto-suave2 = gris claro AA (~10:1) para subtítulo y ayuda. --------------------------------------------------------- */ .rtc-panel--login { --texto-suave2: #c3d3ec; /* contraste AA sobre #0f1b2e (~10:1) */ --azul-acento: #66c0ff; /* Fluida: 100% con tope; los márgenes laterales los da el padding de .rtc-main. Sin ancho fijo que exceda el viewport (verificado 360/390/414). */ width: 100%; max-width: 420px; margin: 0 auto; padding: 0; } .rtc-login__form { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem 1.3rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .rtc-login__tit { font-family: 'Rajdhani', 'Inter', system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; color: var(--texto); text-align: center; } .rtc-login__sub { color: var(--texto-suave2); font-size: 0.95rem; margin-top: -0.4rem; text-align: center; } /* Inputs del login: heredan el tratamiento oscuro de .rtc-campo__in (base). */ /* Etiqueta completa clicable, área táctil >=44px (toda la fila). */ .rtc-login__recordar { display: flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--texto-suave2); font-size: 0.92rem; cursor: pointer; } .rtc-login__recordar input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--azul); } .rtc-login__btn { width: 100%; } .rtc-login__ayuda { color: var(--texto-suave2); font-size: 0.88rem; text-align: center; line-height: 1.5; } .rtc-login__enlace { color: var(--azul-acento); font-weight: 600; text-decoration: underline; } .rtc-login__enlace:hover { color: #8fd2ff; } .rtc-login__enlace:focus-visible { outline: 2px solid var(--azul-acento); outline-offset: 2px; border-radius: 4px; } /* Mostrar/ocultar contraseña en el login. */ .rtc-pass { position: relative; } .rtc-pass .rtc-campo__in { padding-right: 5rem; } .rtc-pass__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 36px; padding: 6px 10px; background: transparent; border: 0; color: var(--azul-acento); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; border-radius: var(--radio-sm); } .rtc-pass__toggle:hover { color: var(--azul-claro); } .rtc-pass__toggle:focus-visible { outline: 2px solid var(--azul-acento); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .rtc-panel *, .rtc-panel *::before, .rtc-panel *::after { animation: none !important; transition: none !important; } }