/* ==========================================================================
OBS REMOTE — IRLPERU
Tokens tomados del tema principal de irlperu.com (:root).
Reglas del sistema, iguales a las del panel principal:
VERDE (#1D9E75) = al aire / conectado
ROJO (#E24B4A) = error / sin conexion
DORADO (#D4A017) = marca y "esto esta seleccionado"
Sin webfonts en el panel de control: se abre desde datos moviles, en la calle.
========================================================================== */
:root {
/* --- Fondos --- */
--bg: #0f1117;
--surface: #111827;
--surface2: #1a1f2e;
/* --- Texto --- */
--text: #e5e7eb;
--text-strong: #ffffff; /* texto protagonista (titulos, nombres, inputs) */
--field-bg: rgba(0,0,0,0.3);
--field-border: rgba(255,255,255,0.1);
--btn-bg: rgba(255,255,255,0.08); /* botones secundarios: translucido, se adapta a cualquier fondo (incl. la barra dorada) */
--btn-bg-hover: rgba(255,255,255,0.14);
--chip-bg: var(--border2); /* fondo de los recuadros de copiar KEY/dock */
--text-mid: rgba(255,255,255,0.5);
--text-dim: rgba(255,255,255,0.4);
--text-dimmer: rgba(255,255,255,0.35);
--text-dim2: rgba(255,255,255,0.2);
/* --- Bordes --- */
--border: rgba(255,255,255,0.08);
--border2: rgba(255,255,255,0.07);
--border-strong: rgba(255,255,255,0.18);
/* --- Tema I3: superficies interactivas claras sobre fondo oscuro ---
Lo que se toca "salta" hacia el usuario: teclas claras con texto
oscuro. Legible a pleno sol, porque el reflejo cae por igual sobre
toda la pantalla y lo que manda es el contraste tecla/fondo.
El fondo y las tarjetas informativas siguen siendo oscuros. */
--ctrl: #E4E7EC; /* cara del boton */
--ctrl-press: #CDD2DA; /* al pulsar */
--ctrl-border: #F3F5F8;
--ctrl-text: #1B1F26; /* texto sobre boton claro */
--ctrl-text-dim:#4A5058;
--ctrl-off: #2A313B; /* boton desactivado: vuelve a oscuro */
--ctrl-off-text:rgba(255,255,255,0.4);
/* --- Acentos de marca --- */
--gold: #D4A017;
--gold-light: #FAC775;
--gold-mid: #EF9F27;
--gold-dark: #2a1f00;
--gold-darker: #1a0f00;
--gold-bg: rgba(212,160,23,0.08);
--green: #1D9E75;
--green-light: #9FE1CB;
--green-bg: rgba(29,158,117,0.15);
--red: #E24B4A;
--red-light: #F09595;
--red-dark: #A32D2D;
--red-darker: #3d0f0f;
--red-bg: rgba(226,75,74,0.15);
/* --- Forma --- */
--r: 14px;
--r-sm: 9px;
--r-pill: 999px;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--tap: 48px; /* objetivo tactil minimo: se usa con una mano */
/* Iconos como mascaras SVG: heredan color via background, sin webfont */
--icon-copy: url('data:image/svg+xml;utf8, NO heredan color ni fuente: usan los del navegador, y el
color por defecto es negro. Sobre fondo oscuro eso es invisible. */
button {
font-family: inherit;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* ==========================================================================
LA FIRMA: barra de aire. Solo existe mientras emites.
========================================================================== */
#airBar {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--green);
transform: scaleY(0);
transform-origin: top;
transition: transform .2s ease;
z-index: 100;
}
body.is-live #airBar {
transform: scaleY(1);
animation: air 2.4s ease-in-out infinite;
}
@keyframes air {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
/* ==========================================================================
LOGIN — calcado de la pantalla de acceso de irlperu.com
========================================================================== */
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 16px;
}
.login-card {
background: var(--surface2);
border: 0.5px solid var(--border);
border-radius: 16px;
padding: 32px;
width: 100%;
max-width: 380px;
position: relative;
}
/* Logo de marca discreto en la esquina (solo icono) */
.login-corner-logo {
position: absolute;
top: 16px;
left: 18px;
display: block;
opacity: 0.9;
}
.login-corner-logo svg { display: block; }
/* Bloque central: grafico de control remoto + titulo */
.login-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 28px 0 28px;
}
.login-remote { display: block; }
.login-title {
font-family: "Syne", var(--sans);
font-weight: 700;
font-size: 22px;
color: var(--text-strong);
line-height: 1.15;
margin-top: 12px;
}
.login-subtitle {
font-size: 11.5px;
color: var(--gold);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 5px;
}
/* Nombre de marca en la cabecera de la app (admin/panel) */
.brand-name {
font-family: "Syne", var(--sans);
font-weight: 700;
font-size: 15px;
color: var(--text-strong);
line-height: 1.15;
}
.alert {
padding: 10px 14px;
border-radius: 8px;
margin-bottom: 14px;
font-size: 14px;
line-height: 1.4;
background: var(--red-darker);
border: 0.5px solid var(--red-dark);
color: var(--red-light);
}
.fg { margin-bottom: 14px; }
.fl {
font-size: 14px;
color: var(--text-mid);
display: block;
margin-bottom: 5px;
}
.fi {
width: 100%;
background: var(--field-bg);
border: 0.5px solid var(--field-border);
border-radius: 8px;
padding: 12px 13px;
font-size: 16px; /* 16px evita el zoom automatico de iOS */
color: var(--text-strong);
outline: none;
font-family: inherit;
}
.fi:focus { border-color: var(--gold); }
.fi::placeholder { color: var(--text-dim2); }
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--tap);
padding: 13px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border: none;
background: var(--gold);
color: var(--gold-darker);
margin-top: 6px;
font-family: inherit;
}
.btn:active { opacity: .85; }
.btn[disabled] {
background: var(--border2);
color: var(--text-mid);
cursor: default;
}
/* ==========================================================================
BOTONES GENERALES
========================================================================== */
.btn-small {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 14px;
background: var(--btn-bg);
border: 0.5px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-mid);
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
font-family: inherit;
}
.btn-small:active { background: var(--border); }
/* ==========================================================================
ESTRUCTURA DE LA APP
========================================================================== */
.app-container { min-height: 100vh; padding-bottom: 32px; }
header {
background: var(--bg);
padding: 14px max(16px, calc((100% - 1240px) / 2));
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.5px solid var(--border);
position: sticky;
top: 0;
z-index: 20;
}
body.is-live header { border-bottom-color: var(--green); }
.logo {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 9px;
}
.logo svg { display: block; flex-shrink: 0; }
header .brand-name { font-size: 15px; }
.user-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-mid);
}
main {
padding: 16px;
max-width: 620px; /* el panel se disena para el movil */
margin: 0 auto;
}
/* Admin necesita mas sitio: la tabla tiene seis columnas. */
main.wide { max-width: 1240px; }
@media (min-width: 900px) {
main { padding: 24px 16px; }
main.wide { padding: 28px 24px; }
}
/* --- Barra de control remoto: un admin manejando otro OBS --- */
.control-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 11px 16px;
background: var(--gold-dark);
border-bottom: 0.5px solid var(--gold-mid);
color: var(--gold-light);
font-size: 13px;
line-height: 1.4;
}
.control-bar strong { color: #fff; font-weight: 700; }
.control-bar .act { flex-shrink: 0; text-decoration: none; }
.owner-note {
font-size: 11px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
/* ==========================================================================
PESTAÑAS
========================================================================== */
.tabs {
display: flex;
padding: 0 max(16px, calc((100% - 620px) / 2));
border-bottom: 0.5px solid var(--border);
background: var(--bg);
}
.tab-btn {
flex: 1;
min-height: var(--tap);
padding: 12px 8px;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-dim);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: color .15s, border-color .15s;
}
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ==========================================================================
TARJETAS Y CAMPOS
========================================================================== */
.card {
background: var(--surface);
border: 0.5px solid var(--border);
border-radius: var(--r);
padding: 18px;
margin-bottom: 14px;
}
.card h3, .card h4,
.scenes-section h4, .audio-section h4 {
font-size: 11px;
font-weight: 700;
color: var(--text-mid);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
/* Una linea de ayuda bajo cada titulo: dice que hacer, no como funciona. */
.card .hint {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-dim);
margin-bottom: 14px;
}
.card .hint strong { color: var(--text-mid); font-weight: 600; }
.info-row { margin-bottom: 16px; }
.info-row:last-child { margin-bottom: 0; }
.info-row label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-mid);
margin-bottom: 6px;
}
.copy-box { display: flex; gap: 8px; }
.copy-box input {
flex: 1;
min-width: 0;
padding: 13px 12px;
background: rgba(0,0,0,0.3);
border: 0.5px solid rgba(255,255,255,0.1);
border-radius: var(--r-sm);
color: var(--text);
font-size: 16px; /* 16px evita el zoom automatico de iOS */
font-family: var(--mono);
}
.copy-box input:focus { outline: none; border-color: var(--gold); }
.copy-box .btn-small { flex-shrink: 0; min-height: 48px; padding: 8px 16px; }
/* ==========================================================================
ESTADO DE LA CONEXION CON OBS
========================================================================== */
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: var(--surface);
border: 0.5px solid var(--border);
border-radius: var(--r-pill);
font-size: 12.5px;
font-weight: 600;
color: var(--text-mid);
}
.status-badge::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--text-dim);
flex-shrink: 0;
}
.status-badge:not(.is-ok) { color: var(--red); border-color: var(--red-bg); }
.status-badge:not(.is-ok)::before { background: var(--red); }
.status-badge.is-ok { color: var(--green-light); border-color: var(--green-bg); }
.status-badge.is-ok::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
/* ==========================================================================
PROGRAMA — lo que sale al aire es el elemento mas grande de la pantalla
========================================================================== */
.program-card {
width: 100%;
display: block;
padding: 0;
margin-bottom: 18px;
background: var(--surface);
border: 2px solid var(--gold);
border-radius: var(--r);
overflow: hidden;
cursor: pointer;
text-align: left;
color: var(--text);
}
.program-card:active { opacity: .85; }
.program-preview {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: var(--text-dim);
overflow: hidden;
}
.program-preview img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Con captura real, el borde dorado se refuerza */
.program-card.has-shot { border-color: var(--gold); }
.program-card:not(.has-shot) { border-color: var(--gold-mid); }
.program-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 13px;
}
.program-name {
font-size: 15px;
font-weight: 700;
color: var(--gold-light);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.program-tag {
flex-shrink: 0;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 4px;
border: 0.5px solid var(--gold-mid);
color: var(--gold-light);
}
/* Preview a pantalla completa al tocar el programa */
.fullpreview {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 300;
cursor: zoom-out;
}
.fullpreview-inner { width: 100%; max-width: 1100px; }
.fullpreview img {
width: 100%;
border-radius: 10px;
display: block;
}
/* ==========================================================================
ESCENAS Y AUDIO
========================================================================== */
.scenes-section { margin-bottom: 20px; }
/* Audio: bloque plegable. Se usa poco, arranca cerrado. */
.audio-section { margin-bottom: 20px; }
.audio-section > .audio-grid,
.audio-section > .empty { margin-top: 10px; }
.audio-summary {
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--surface);
border: 0.5px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.audio-summary::-webkit-details-marker { display: none; }
.audio-summary-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-mid);
}
.audio-summary-hint {
font-size: 12px;
color: var(--text-dim);
margin-left: auto;
}
.chevron {
width: 7px; height: 7px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: rotate(45deg);
transition: transform .18s ease;
flex-shrink: 0;
}
.audio-section[open] .chevron { transform: rotate(-135deg); }
.audio-section[open] .audio-summary { border-color: var(--border-strong); }
/* Interruptor de medidores dentro de la seccion de audio */
.meters-switch {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0 4px;
padding: 4px 2px;
}
/* Barra de nivel bajo cada fuente de audio */
.meter {
width: 100%;
height: 4px;
background: rgba(0,0,0,0.35);
border-radius: 2px;
overflow: hidden;
margin-top: 6px;
}
.meter-fill {
display: block;
height: 100%;
width: 0%;
background: var(--green);
border-radius: 2px;
transition: width .08s linear;
}
.meter-fill.warm { background: var(--gold); }
.meter-fill.hot { background: var(--red-light); }
/* En tarjeta silenciada, la barra se apaga visualmente */
.audio-card.muted .meter-fill { background: var(--ctrl-off-text); }
/* ===== FUENTES DE LA ESCENA (encender/apagar) ===== */
.sources-section { margin-bottom: 20px; }
.sources-section > .sources-list,
.sources-section > .empty { margin-top: 10px; }
.sources-list { display: flex; flex-direction: column; gap: 6px; }
.source-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 14px;
background: var(--ctrl);
color: var(--ctrl-text);
border: 0.5px solid var(--ctrl-border);
border-radius: var(--r-sm);
cursor: pointer;
text-align: left;
transition: background .15s;
}
.source-row:active { background: var(--ctrl-press); }
/* Fuente apagada: fila oscura, apagada */
.source-row.off {
background: var(--ctrl-off);
border-color: var(--border);
border-style: dashed;
color: var(--ctrl-off-text);
}
.source-eye { font-size: 16px; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; }
.source-name {
flex: 1;
font-size: 13.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-state {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
flex-shrink: 0;
}
.source-row.off .source-state { color: var(--ctrl-off-text); }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.section-head h4 { margin-bottom: 0; }
/* Interruptor. El envuelve texto y pastilla, asi que toda la
etiqueta es zona de toque, no solo los 38px del interruptor. */
.switch {
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
flex-shrink: 0;
padding: 4px 0;
-webkit-tap-highlight-color: transparent;
}
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-dim);
transition: color .15s;
}
.switch-track {
position: relative;
width: 38px;
height: 22px;
border-radius: var(--r-pill);
background: var(--border2);
border: 0.5px solid rgba(255,255,255,0.12);
flex-shrink: 0;
transition: background .18s, border-color .18s;
}
.switch-track::after {
content: "";
position: absolute;
top: 2.5px;
left: 2.5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--text-dim);
transition: transform .18s ease, background .18s;
}
.switch input:checked ~ .switch-track {
background: var(--gold);
border-color: var(--gold);
}
.switch input:checked ~ .switch-track::after {
transform: translateX(16px);
background: var(--gold-darker);
}
.switch input:checked ~ .switch-label { color: var(--text-mid); }
.switch input:focus-visible ~ .switch-track {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.switch:active .switch-track::after { width: 19px; }
/* Las demas escenas, mas pequenas: tres por fila */
.scenes-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.scene-card {
background: var(--ctrl);
color: var(--ctrl-text);
border: 0.5px solid var(--ctrl-border);
border-radius: var(--r-sm);
padding: 0;
cursor: pointer;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: left;
transition: transform .12s, background .15s;
}
.scene-card:active { background: var(--ctrl-press); transform: scale(0.97); }
.scene-preview {
width: 100%;
aspect-ratio: 16 / 9;
background: #2A313B;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 15px;
overflow: hidden;
}
.scene-preview img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.scene-name {
color: var(--ctrl-text);
font-size: 11.5px;
font-weight: 700;
line-height: 1.25;
padding: 6px 7px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.audio-card {
min-height: 76px;
background: var(--ctrl);
color: var(--ctrl-text);
border: 0.5px solid var(--ctrl-border);
border-radius: var(--r-sm);
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: transform .12s, background .15s;
}
.audio-card:active { background: var(--ctrl-press); transform: scale(0.97); }
/* Silenciado: vuelve a oscuro. Deja claro de un vistazo cual esta cortado. */
.audio-card.muted {
background: var(--ctrl-off);
border-color: var(--border);
border-style: dashed;
}
.audio-card.muted .audio-icon { opacity: .6; }
.audio-card.muted .audio-name { color: var(--ctrl-off-text); }
.audio-icon { font-size: 19px; line-height: 1; }
.audio-name {
font-size: 11.5px;
font-weight: 700;
text-align: center;
line-height: 1.25;
color: var(--ctrl-text);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.empty {
padding: 20px 16px;
text-align: center;
color: var(--text-dim);
font-size: 12.5px;
line-height: 1.5;
border: 0.5px dashed var(--border);
border-radius: var(--r-sm);
}
/* ==========================================================================
BARRA DE ACCION — fija abajo, al alcance del pulgar
========================================================================== */
.action-bar {
position: sticky;
bottom: 0;
margin: 20px -16px 0;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: var(--bg);
border-top: 0.5px solid var(--border);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 15;
}
.btn-stream {
width: 100%;
min-height: 62px;
padding: 14px 18px;
border: none;
border-radius: var(--r-sm);
background: var(--gold);
color: var(--gold-darker);
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
text-align: left;
transition: background .18s, transform .12s;
}
.btn-stream .icon { font-size: 20px; line-height: 1; }
.btn-stream .text { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.btn-stream .status {
margin-left: auto;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(42,26,0,0.6);
font-variant-numeric: tabular-nums;
}
.btn-stream.btn-live {
background: #0f6b4b;
color: #eafff6;
}
.btn-stream.btn-live .status { color: rgba(234,255,246,0.75); }
.btn-stream:active { transform: scale(0.99); }
.action-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.btn-icon {
min-height: var(--tap);
background: var(--ctrl);
color: var(--ctrl-text);
border: 0.5px solid var(--ctrl-border);
border-radius: var(--r-sm);
padding: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
cursor: pointer;
transition: transform .12s, background .15s;
}
.btn-icon:active { background: var(--ctrl-press); transform: scale(0.96); }
.btn-icon .ico { font-size: 17px; line-height: 1; }
.btn-icon .lbl { font-size: 10px; font-weight: 800; letter-spacing: .04em; }
/* Micro cortado: se enciende en rojo claro para que salte */
/* Micro cortado -> plomo apagado. Abierto -> claro (estado base). */
.btn-icon.is-muted {
background: var(--ctrl-off);
border-color: var(--border);
color: var(--ctrl-off-text);
}
/* Panico armado: rojo claro. Desarmado: apagado y oscuro. */
.btn-panic {
background: #B84A38;
border-color: #C85A46;
color: #fff;
}
.btn-panic.is-off {
background: var(--ctrl-off);
border-color: var(--border);
color: var(--ctrl-off-text);
}
.btn-icon[disabled] {
background: var(--ctrl-off);
border-color: var(--border);
color: var(--ctrl-off-text);
cursor: default;
}
/* Desplegable de la escena de panico */
select.fi {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 34px;
}
select.fi option { background: var(--surface2); color: var(--text); }
/* ==========================================================================
MENU DE USUARIO + MODAL DE CONTRASEÑA
========================================================================== */
.user-menu { position: relative; }
.user-btn {
display: flex;
align-items: center;
gap: 7px;
background: none;
border: none;
color: var(--text-mid);
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 6px 4px;
font-family: inherit;
}
.user-btn .chevron {
width: 6px; height: 6px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: rotate(45deg);
transition: transform .18s;
}
.user-btn.open .chevron { transform: rotate(-135deg); }
.menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 190px;
background: var(--surface2);
border: 0.5px solid var(--border-strong);
border-radius: var(--r-sm);
padding: 5px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
z-index: 40;
}
.menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--text);
font-size: 13.5px;
padding: 11px 12px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
}
.menu-item:active { background: var(--surface); }
.menu-item.danger { color: var(--red-light); }
/* Modal */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 300;
}
.modal {
width: 100%;
max-width: 380px;
background: var(--surface2);
border: 0.5px solid var(--border-strong);
border-radius: var(--r);
padding: 22px;
}
.modal h3 {
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
}
.modal .fg { margin-bottom: 12px; }
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 18px;
}
.modal-actions .act { padding: 11px 16px; }
.modal-actions .btn { width: auto; padding: 11px 22px; margin-top: 0; }
/* Boton de copiar con icono (SVG inline via mask) + check verde al copiar */
.btn-copy {
flex-shrink: 0;
width: 46px;
min-height: 48px;
background: var(--surface2);
border: 0.5px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.btn-copy::before {
content: "";
width: 17px;
height: 17px;
background: var(--text-mid);
-webkit-mask: var(--icon-copy) center / contain no-repeat;
mask: var(--icon-copy) center / contain no-repeat;
}
.btn-copy:active { background: var(--border); }
/* Estado copiado: se pone verde y el icono cambia a un check */
.btn-copy.copied {
background: var(--green-bg);
border-color: var(--green);
}
.btn-copy.copied::before {
background: var(--green-light);
-webkit-mask: var(--icon-check) center / contain no-repeat;
mask: var(--icon-check) center / contain no-repeat;
}
/* En movil el boton "Apps externas" ocupa toda la fila */
.row-flat .act.wide { grid-column: 1 / -1; }
/* ==========================================================================
ADMIN — componentes calcados de irlperu.com
========================================================================== */
.admin-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.admin-head h3 { margin-bottom: 0; }
.count {
font-size: 12px;
color: var(--text-dim);
font-family: var(--mono);
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.count #dockCount { color: var(--green-light); }
/* Formulario de alta */
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4px 14px;
}
.form-grid .fg { margin-bottom: 8px; }
.form-grid .btn { margin-top: 4px; }
/* Buscador de usuarios */
.user-search {
margin-bottom: 20px;
margin-top: 4px;
}
.user-search .fi {
max-width: 320px;
}
/* Envoltorio de tabla */
.tw {
border: 0.5px solid var(--border);
border-radius: 12px;
overflow: hidden;
overflow-x: auto;
margin-bottom: 14px;
-webkit-overflow-scrolling: touch;
}
.data-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
/* La URL del dock es la columna que mas espacio necesita */
.data-table td.cell-dock .ub { max-width: 340px; }
.data-table td.cell-key .ub { max-width: 200px; }
.data-table th {
background: var(--surface2);
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: .05em;
padding: 9px 10px;
text-align: left;
border-bottom: 0.5px solid var(--border);
white-space: nowrap;
}
.data-table td {
padding: 10px;
font-size: 13px;
color: var(--text);
border-bottom: 0.5px solid var(--border2);
vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td.cell-user { font-weight: 600; }
/* Chip monoespaciado: se pulsa para copiar */
.ub {
font-family: var(--mono);
font-size: 12px;
background: var(--chip-bg);
border: 0.5px solid var(--border2);
border-radius: 5px;
padding: 5px 8px;
color: var(--text-mid);
cursor: pointer;
display: inline-block;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
transition: border-color .15s, color .15s;
}
.ub:hover, .ub:active { border-color: var(--gold); color: #fff; }
/* Pildoras de rol */
.pp, .ip {
display: inline-flex;
padding: 3px 9px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.pp { background: var(--gold-dark); color: var(--gold-light); }
.ip { background: var(--chip-bg); color: var(--text-dim); }
/* Botones de accion */
.act {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 11px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 0.5px solid;
background: var(--btn-bg);
font-family: inherit;
transition: opacity .15s, background .15s;
text-decoration: none;
}
.act:active { opacity: .65; }
.act + .act { margin-left: 6px; }
.act.gold { border-color: var(--gold); color: var(--gold); }
.act.danger { border-color: var(--red-dark); color: var(--red); }
.act.ghost { border-color: var(--text-dim2); color: var(--text-mid); }
.act.primary {
background: var(--gold);
border-color: var(--gold);
color: var(--gold-darker);
}
/* Desactivado: NO se usa opacity sobre un boton relleno, porque el texto
oscuro sobre dorado apagado queda ilegible. Se vacia el relleno y el
texto pasa a ser claro. */
.act.is-off,
.act[disabled] {
background: var(--btn-bg);
border-color: var(--border-strong);
color: var(--text-mid);
cursor: default;
}
.actions { white-space: nowrap; }
/* ===== MENU "..." DE CADA FILA ===== */
.rowmenu { position: relative; display: inline-block; vertical-align: middle; }
.act + .rowmenu { margin-left: 6px; }
.rowmenu-trigger {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0.5px solid var(--border-strong);
border-radius: 8px;
color: var(--text-mid);
font-size: 18px;
line-height: 1;
cursor: pointer;
font-family: inherit;
}
.rowmenu-trigger:active { background: var(--surface2); }
.rowmenu.open .rowmenu-trigger { border-color: var(--gold); color: var(--gold); }
.rowmenu-list {
display: none;
position: fixed; /* fuera del recorte de la tabla; el JS calcula top/left */
min-width: 210px;
background: var(--surface2);
border: 0.5px solid var(--border-strong);
border-radius: var(--r-sm);
padding: 5px;
box-shadow: 0 12px 32px rgba(0,0,0,0.5);
z-index: 200;
}
.rowmenu.open .rowmenu-list { display: block; }
.rowmenu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--text);
font-size: 13.5px;
padding: 11px 12px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
}
.rowmenu-item:active { background: var(--surface); }
.rowmenu-item.danger { color: var(--red-light); }
.rowmenu-item[disabled] { color: var(--text-dim); cursor: default; }
.rowmenu-sep {
height: 0.5px;
background: var(--border);
margin: 4px 8px;
}
/* En escritorio manda el menu "..."; los botones planos solo salen en movil */
.row-flat { display: none; }
/* --- Estado del dock --- */
.state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sdot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sdot.ok { background: var(--green); box-shadow: 0 0 7px var(--green); }
.sdot.warn { background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.sdot.off { background: var(--text-dim2); }
.sdot.stale {
background: transparent;
border: 2px solid var(--gold);
width: 9px; height: 9px;
}
.state-label { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.state .sdot.ok + .state-label { color: var(--green-light); }
.state .sdot.warn + .state-label { color: var(--gold-light); }
.state .sdot.stale + .state-label { color: var(--gold-light); }
.state-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--r-pill);
background: var(--border2);
font-size: 10.5px;
font-weight: 700;
color: var(--text-mid);
}
/* Destello en la fila recien creada */
.data-table tr.is-new { animation: newRow 2.4s ease-out; }
@keyframes newRow {
0%, 70% { background: var(--gold-dark); }
100% { background: transparent; }
}
/* Aviso dorado tras crear un usuario */
.banner {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border-radius: 10px;
background: var(--gold-dark);
border: 0.5px solid var(--gold-mid);
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
color: var(--gold-light);
}
.banner strong { color: #fff; font-weight: 700; }
/* Aviso flotante al copiar */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%) translateY(8px);
background: var(--surface2);
border: 0.5px solid var(--gold);
color: var(--gold-light);
padding: 11px 18px;
border-radius: var(--r-pill);
font-size: 13px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity .2s, transform .2s;
z-index: 200;
max-width: calc(100vw - 32px);
text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ==========================================================================
MENSAJES
========================================================================== */
.error, .message {
font-size: 13px;
line-height: 1.45;
margin-top: 12px;
}
.error { color: var(--red); }
/* ==========================================================================
MOVIL: la tabla se convierte en tarjetas plegables
Cada fila muestra solo nombre y estado; se toca para desplegar el resto.
========================================================================== */
@media (max-width: 640px) {
.tw {
border: none;
border-radius: 0;
overflow: visible;
margin-bottom: 0;
}
.data-table,
.data-table tbody { display: block; width: 100%; min-width: 0; }
.data-table thead { display: none; }
.data-table tr {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
background: var(--surface2);
border: 0.5px solid var(--border);
border-radius: 12px;
padding: 14px;
margin-bottom: 9px;
cursor: pointer;
}
.data-table tr.is-open { border-color: var(--border-strong); }
/* Todo oculto salvo la cabecera de la tarjeta */
.data-table td { display: none; border: none; padding: 0; }
.data-table td.cell-user,
.data-table td.cell-state { display: flex; align-items: center; }
.data-table td.cell-user {
grid-column: 1;
gap: 9px;
font-size: 15.5px;
font-weight: 700;
}
.data-table td.cell-user::before { content: none; }
/* Flecha que gira al abrir */
.data-table td.cell-user::after {
content: "";
width: 6px; height: 6px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: translateY(-2px) rotate(45deg);
transition: transform .18s ease;
flex-shrink: 0;
}
.data-table tr.is-open td.cell-user::after {
transform: translateY(1px) rotate(-135deg);
}
.data-table td.cell-state { grid-column: 2; justify-content: flex-end; }
.data-table td.cell-state::before { content: none; }
.data-table td.cell-state .state-label { display: none; }
/* --- Desplegada --- */
.data-table tr.is-open td.cell-state .state-label { display: inline; }
.data-table tr.is-open td.cell-key,
.data-table tr.is-open td.cell-dock,
.data-table tr.is-open td.cell-role,
.data-table tr.is-open td.cell-date {
display: flex;
grid-column: 1 / -1;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 0 0;
}
.data-table tr.is-open td.cell-key {
margin-top: 12px;
padding-top: 13px;
border-top: 0.5px solid var(--border2);
}
.data-table td::before {
content: attr(data-label);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-dim);
flex-shrink: 0;
}
.data-table .ub { max-width: 60%; text-align: right; }
/* La URL del dock es lo que hay que copiar: linea propia y sin recortar */
.data-table tr.is-open td.cell-dock {
display: block;
text-align: left;
}
.data-table tr.is-open td.cell-dock::before { display: block; margin-bottom: 6px; }
.data-table tr.is-open td.cell-dock .ub {
max-width: 100%;
width: 100%;
text-align: left;
white-space: normal;
word-break: break-all;
line-height: 1.45;
}
/* Cuatro acciones: la principal arriba a lo ancho, el resto en rejilla */
.data-table tr.is-open td.actions { grid-template-columns: 1fr 1fr; }
.data-table tr.is-open td.actions {
display: grid;
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 13px;
padding-top: 13px;
border-top: 0.5px solid var(--border2);
}
.data-table tr.is-open td.actions::before { content: none; }
.data-table td.actions .act.primary { grid-column: 1 / -1; }
/* En movil: menu oculto, vuelven los botones planos de siempre */
.data-table td.actions .rowmenu { display: none; }
.data-table td.actions .row-flat {
display: grid;
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.data-table td.actions .row-flat .act {
justify-content: center;
padding: 11px;
font-size: 12.5px;
}
.data-table td.actions .act { padding: 11px; font-size: 12.5px; }
.data-table td.actions .act + .act { margin-left: 0; }
@keyframes newRow {
0%, 70% { background: var(--gold-dark); }
100% { background: var(--surface2); }
}
}
/* ==========================================================================
PANTALLAS MAS ANCHAS
========================================================================== */
@media (min-width: 560px) {
.form-grid { grid-template-columns: 1fr 1fr; }
.form-grid .btn {
grid-column: 1 / -1;
width: auto;
justify-self: start;
padding: 13px 28px;
}
}
@media (min-width: 620px) {
.scenes-strip { grid-template-columns: repeat(4, 1fr); }
.audio-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
ACCESIBILIDAD
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.is-live #airBar { animation: none; }
.data-table tr.is-new { animation: none; border-color: var(--gold); }
* { transition: none !important; }
}
/* ==========================================================================
SELECTOR DE TEMA (circulos partidos, en la pestaña Conexion)
========================================================================== */
.theme-picker {
display: flex;
gap: 18px;
align-items: flex-start;
}
.theme-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.theme-swatch {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
display: block;
border: 2px solid transparent;
position: relative;
transition: box-shadow .15s, border-color .15s;
}
.theme-swatch::before {
content: "";
position: absolute;
inset: 0;
/* mitad fondo / mitad acento: se define por tema abajo */
background: linear-gradient(90deg, var(--sw-bg) 50%, var(--sw-accent) 50%);
}
.theme-opt.active .theme-swatch {
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-bg);
}
.theme-name {
font-size: 11px;
font-weight: 600;
color: var(--text-mid);
}
.theme-opt.active .theme-name { color: var(--gold); }
/* colores de cada muestra (fijos, no dependen del tema activo) */
.theme-opt[data-theme-id="oscuro"] { --sw-bg: #0f1117; --sw-accent: #D4A017; }
.theme-opt[data-theme-id="intermedio"] { --sw-bg: #2b3648; --sw-accent: #D4A017; }
.theme-opt[data-theme-id="claro"] { --sw-bg: #f0f0ea; --sw-accent: #B8860B; }
/* Franja de tema bajo la cabecera del admin (identica a las tarjetas) */
.theme-strip {
display: flex;
align-items: center;
gap: 18px;
background: var(--surface);
border: 0.5px solid var(--border);
border-radius: var(--r);
padding: 18px;
margin-bottom: 14px;
}
.theme-strip-label {
font-size: 11px;
color: var(--text-mid);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
/* dentro de la franja los circulos van en fila horizontal, compactos */
.theme-strip .theme-picker { gap: 18px; }
.theme-strip .theme-opt { flex-direction: row; gap: 7px; }
.theme-strip .theme-swatch { width: 24px; height: 24px; }
/* "Crear usuario" colapsable SOLO en movil. En escritorio siempre abierto. */
.card-collapsible > .card-summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
}
.card-collapsible > .card-summary::-webkit-details-marker { display: none; }
.card-collapsible > .card-summary h3 { margin: 0; }
.card-chevron {
width: 10px; height: 10px;
border-right: 2px solid var(--text-mid);
border-bottom: 2px solid var(--text-mid);
transform: rotate(45deg);
transition: transform .2s;
flex-shrink: 0;
}
.card-collapsible[open] > .card-summary .card-chevron { transform: rotate(-135deg); }
/* En escritorio: siempre abierto, sin flecha, no interactivo el summary */
@media (min-width: 721px) {
.card-collapsible { }
.card-collapsible > .card-summary { cursor: default; pointer-events: none; }
.card-collapsible > .card-summary .card-chevron { display: none; }
}
/* Selector de tema en la cabecera (solo escritorio) vs franja (solo movil) */
.theme-picker-header {
display: none; /* por defecto oculto; se muestra en escritorio */
gap: 12px;
align-items: center;
padding-right: 14px;
margin-right: 4px;
border-right: 0.5px solid var(--border);
}
.theme-picker-header .theme-swatch { width: 24px; height: 24px; }
@media (min-width: 721px) {
/* En escritorio: los circulos van en la cabecera, la franja se oculta */
.theme-picker-header { display: flex; }
.theme-strip { display: none; }
}