/* ─────────────────────────────────────────────────────────────────────────────
ESports Cam PRO — UI v2 · Liquid Glass (oscuro)
Se carga DESPUÉS de theme.css. Es opt-in por página:
· data-theme="dark" → fondo con luces + cristal + componentes
· data-shell="sidebar" → barra lateral flotante + Ctrl+K (js/shell.js, lo monta navbar.js)
Receta del cristal: relleno translúcido + desenfoque del fondo con más saturación +
brillo en el borde (reflejo arriba-izquierda, sombra abajo-derecha) + sombra suave.
Las páginas que no lo piden siguen como estaban. Los outputs de vMix (transparentes)
NO cargan esto nunca.
───────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
color-scheme: dark;
/* superficies (translúcidas: el cristal deja ver el fondo) */
--ecm-bg: #06080e;
--ecm-bg-elevated: rgba(24, 28, 44, 0.52);
--ecm-bg-subtle: rgba(255, 255, 255, 0.06);
--ecm-surface-3: rgba(255, 255, 255, 0.12);
--ecm-side-bg: rgba(14, 17, 28, 0.50);
--ecm-pop-bg: rgba(26, 31, 48, 0.94);
/* líneas y texto */
--ecm-border: rgba(255, 255, 255, 0.10);
--ecm-border-strong: rgba(255, 255, 255, 0.20);
--ecm-text: #f3f5fa;
--ecm-text-muted: #b4bccd;
--ecm-text-subtle: #7f889b;
/* acento (azul) */
--ecm-primary: #3b82f6;
--ecm-primary-hover: #5b9bff;
--ecm-primary-active: #2563eb;
--ecm-accent-text: #9cc4ff;
--ecm-accent-soft: rgba(90, 150, 255, 0.20);
--ecm-accent-ring: rgba(90, 150, 255, 0.50);
/* estado */
--ecm-success: #34c759;
--ecm-warning: #ff9f0a;
--ecm-danger: #ef4444;
--ecm-danger-hover: #f26a6a;
--ecm-success-soft: rgba(52, 199, 89, 0.18);
--ecm-warning-soft: rgba(255, 159, 10, 0.18);
--ecm-danger-soft: rgba(239, 68, 68, 0.20);
/* los azules de theme.css se usan como fondos suaves: aquí pasan a tintes translúcidos */
--ecm-blue-50: rgba(90, 150, 255, 0.12);
--ecm-blue-100: rgba(90, 150, 255, 0.20);
--ecm-blue-200: rgba(90, 150, 255, 0.40);
/* ── Cristal ── */
--glass-blur: 26px;
--glass-sat: 1.7;
--glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.015) 62%, rgba(255, 255, 255, 0.06) 100%);
--glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
--glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.28);
--glass-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.25);
--ecm-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
--ecm-shadow-sm: var(--glass-shadow-sm);
--ecm-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.4);
--ecm-shadow-lg: var(--glass-shadow);
--ecm-glow: 0 0 0 3px rgba(90, 150, 255, 0.40);
--ecm-glow-strong: 0 0 0 3px rgba(90, 150, 255, 0.40), 0 10px 28px rgba(59, 130, 246, 0.30);
}
/* ── Base de página + fondo con luces (lo que el cristal desenfoca) ───────── */
[data-theme="dark"] body {
margin: 0;
min-height: 100vh;
color: var(--ecm-text);
font-family: var(--ecm-font);
-webkit-font-smoothing: antialiased;
background: var(--ecm-bg);
}
[data-theme="dark"] body::after {
content: '';
position: fixed;
inset: -18vmax;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38vmax 38vmax at 18% 22%, rgba(59, 130, 246, 0.55), transparent 62%),
radial-gradient(34vmax 34vmax at 82% 14%, rgba(124, 92, 255, 0.42), transparent 60%),
radial-gradient(40vmax 40vmax at 72% 88%, rgba(34, 211, 238, 0.28), transparent 62%),
radial-gradient(30vmax 30vmax at 10% 84%, rgba(236, 72, 153, 0.20), transparent 62%);
animation: ecmDrift 52s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes ecmDrift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-3vmax, 2vmax, 0) scale(1.1) rotate(2deg); }
}
[data-theme="dark"] ::selection { background: rgba(90, 150, 255, 0.45); }
[data-theme="dark"] * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
/* :where() deja esta regla con especificidad mínima: solo colorea enlaces «sueltos» y
cualquier clase (botón, ítem de menú, tarjeta…) la sobrescribe sin pelear. */
:where([data-theme="dark"]) a { color: var(--ecm-accent-text); }
/* ── Superficies de cristal ───────────────────────────────────────────────────
Paneles grandes: borde con degradado (reflejo) hecho con ::before + máscara. */
[data-theme="dark"] .ecm-card,
[data-theme="dark"] .ecm-table-wrap,
.ecm-glass {
position: relative;
background-image: var(--glass-sheen);
background-color: var(--ecm-bg-elevated);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
box-shadow: var(--glass-shadow-sm);
}
[data-theme="dark"] .ecm-card::before, [data-theme="dark"] .ecm-table-wrap::before, .ecm-glass::before,
.es-side::before, .es-pal-box::before, .es-mbar::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
padding: 1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.10) 78%, rgba(255, 255, 255, 0.36) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Contenedor y cabecera de página */
.ecm-main { max-width: 1280px; margin: 0 auto; padding: 32px 32px 72px; }
.ecm-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.ecm-h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--ecm-text); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.ecm-h2 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ecm-text-muted); }
.ecm-sub { margin: 6px 0 0; font-size: 14px; color: var(--ecm-text-muted); line-height: 1.5; }
.ecm-section { margin-bottom: 36px; }
.ecm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ecm-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ecm-muted { color: var(--ecm-text-muted); }
.ecm-subtle { color: var(--ecm-text-subtle); }
.ecm-mono { font-family: var(--ecm-font-mono); }
[data-theme="dark"] .ecm-divider { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); }
/* ── Botones (cápsulas de cristal; extiende .ecm-btn de theme.css) ────────── */
[data-theme="dark"] .ecm-btn { border-radius: 999px; padding: 10px 20px; border: 0; transition: transform .18s var(--ecm-spring), background .15s, box-shadow .15s, filter .15s, opacity .15s; }
[data-theme="dark"] .ecm-btn:active:not(:disabled) { transform: scale(0.95); }
[data-theme="dark"] .ecm-btn-sm { padding: 6px 14px; }
[data-theme="dark"] .ecm-btn-lg { padding: 14px 28px; border-radius: 999px; }
[data-theme="dark"] .ecm-btn-secondary {
color: var(--ecm-text);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
-webkit-backdrop-filter: blur(14px) saturate(1.5);
backdrop-filter: blur(14px) saturate(1.5);
box-shadow: var(--glass-rim), 0 6px 16px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .ecm-btn-secondary:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.09)); }
[data-theme="dark"] .ecm-btn-primary {
color: #fff;
background: linear-gradient(180deg, #7db3ff 0%, #3b82f6 52%, #2b6be3 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 8px 22px rgba(59, 130, 246, 0.5);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .ecm-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #96c2ff 0%, #4f8ff7 52%, #3a78ee 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 10px 28px rgba(59, 130, 246, 0.62); }
[data-theme="dark"] .ecm-btn-primary:active:not(:disabled) { background: linear-gradient(180deg, #6ba6ff, #2f6fe8 60%, #2358c9); }
[data-theme="dark"] .ecm-btn-danger {
color: #fff;
background: linear-gradient(180deg, #ff8a8a 0%, #ef4444 55%, #d92f2f 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 8px 20px rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .ecm-btn-danger:hover:not(:disabled) { background: linear-gradient(180deg, #ffa0a0 0%, #f35454 55%, #e03c3c 100%); }
[data-theme="dark"] .ecm-btn-ghost { color: var(--ecm-text-muted); background: transparent; }
[data-theme="dark"] .ecm-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); color: var(--ecm-text); box-shadow: var(--glass-rim); }
.ecm-btn-soft { color: var(--ecm-accent-text); background: linear-gradient(180deg, rgba(120, 175, 255, 0.30), rgba(59, 130, 246, 0.14)); box-shadow: var(--glass-rim); }
.ecm-btn-soft:hover:not(:disabled) { background: linear-gradient(180deg, rgba(140, 190, 255, 0.40), rgba(59, 130, 246, 0.22)); }
.ecm-btn-danger-soft { color: #ff9b9b; background: linear-gradient(180deg, rgba(255, 120, 120, 0.28), rgba(239, 68, 68, 0.14)); box-shadow: var(--glass-rim); }
.ecm-btn-danger-soft:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 130, 130, 0.38), rgba(239, 68, 68, 0.22)); }
.ecm-btn-icon { width: 38px; height: 38px; padding: 0 !important; }
/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] .ecm-card { border: 0; border-radius: 24px; padding: 22px; }
[data-theme="dark"] .ecm-card-glow { box-shadow: var(--glass-shadow-sm), 0 0 0 1px rgba(90, 150, 255, 0.25), 0 14px 44px rgba(59, 130, 246, 0.22); }
.ecm-card-link { display: block; text-decoration: none; color: inherit; transition: transform .28s var(--ecm-spring), box-shadow .2s; }
.ecm-card-link:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--glass-shadow); }
.ecm-card-link:focus-visible { outline: none; box-shadow: var(--glass-shadow-sm), var(--ecm-glow); }
/* ── Formularios (pocillos hundidos de cristal) ───────────────────────────── */
[data-theme="dark"] .ecm-input,
.ecm-select,
.ecm-textarea {
width: 100%; box-sizing: border-box;
padding: 11px 14px;
background: rgba(0, 0, 0, 0.26);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
color: var(--ecm-text);
font: 400 14px var(--ecm-font);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: border-color .15s, box-shadow .15s, background .15s;
}
/* El autorrelleno del navegador pinta el campo de blanco: lo devolvemos al cristal oscuro */
[data-theme="dark"] .ecm-input:-webkit-autofill,
.ecm-textarea:-webkit-autofill { -webkit-text-fill-color: var(--ecm-text); caret-color: var(--ecm-text); box-shadow: inset 0 0 0 100px #1a2033; transition: background-color 9999s; }
.ecm-select, .ecm-textarea { display: block; }
.ecm-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; }
.ecm-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
[data-theme="dark"] .ecm-input::placeholder, .ecm-textarea::placeholder { color: var(--ecm-text-subtle); }
[data-theme="dark"] .ecm-input:hover, .ecm-select:hover, .ecm-textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] .ecm-input:focus, .ecm-select:focus, .ecm-textarea:focus {
outline: none; border-color: rgba(125, 179, 255, 0.85); background-color: rgba(0, 0, 0, 0.34);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(59, 130, 246, 0.30);
}
.ecm-select option { background: #181d2c; color: var(--ecm-text); }
[data-theme="dark"] .ecm-label { color: var(--ecm-text-muted); font-size: 11px; letter-spacing: 0.09em; }
.ecm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ecm-hint { font-size: 12px; color: var(--ecm-text-subtle); line-height: 1.45; }
[data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { accent-color: var(--ecm-primary); }
/* Interruptor: */
.ecm-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; color: var(--ecm-text); user-select: none; }
.ecm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ecm-switch-track { position: relative; width: 46px; height: 28px; border-radius: 999px; flex: 0 0 auto; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08); transition: background .22s, box-shadow .22s; }
.ecm-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #d9deea); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 #fff; transition: transform .3s var(--ecm-spring); }
.ecm-switch input:checked + .ecm-switch-track { background: linear-gradient(180deg, #7db3ff, #3b82f6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 16px rgba(59, 130, 246, 0.55); }
.ecm-switch input:checked + .ecm-switch-track::after { transform: translateX(18px); }
.ecm-switch input:focus-visible + .ecm-switch-track { box-shadow: var(--ecm-glow); }
.ecm-switch input:disabled + .ecm-switch-track { opacity: 0.45; }
/* ── Etiquetas ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .ecm-badge { background: linear-gradient(180deg, rgba(130, 180, 255, 0.26), rgba(59, 130, 246, 0.12)); color: var(--ecm-accent-text); box-shadow: var(--glass-rim); }
[data-theme="dark"] .ecm-badge-success { background: linear-gradient(180deg, rgba(90, 220, 130, 0.28), rgba(52, 199, 89, 0.12)); color: #7be898; }
[data-theme="dark"] .ecm-badge-danger { background: linear-gradient(180deg, rgba(255, 130, 130, 0.28), rgba(239, 68, 68, 0.12)); color: #ff9b9b; }
[data-theme="dark"] .ecm-badge-warn { background: linear-gradient(180deg, rgba(255, 190, 90, 0.28), rgba(255, 159, 10, 0.12)); color: #ffc474; }
.ecm-badge-neutral { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)) !important; color: var(--ecm-text-muted) !important; }
.ecm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ecm-text-subtle); }
.ecm-dot.ok { background: var(--ecm-success); box-shadow: 0 0 0 3px var(--ecm-success-soft), 0 0 12px rgba(52, 199, 89, 0.7); }
.ecm-dot.warn { background: var(--ecm-warning); box-shadow: 0 0 0 3px var(--ecm-warning-soft), 0 0 12px rgba(255, 159, 10, 0.6); }
.ecm-dot.err { background: var(--ecm-danger); box-shadow: 0 0 0 3px var(--ecm-danger-soft), 0 0 12px rgba(239, 68, 68, 0.6); }
.ecm-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 7px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); box-shadow: var(--glass-rim), 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--ecm-text-muted); font: 600 11px var(--ecm-font); letter-spacing: 0.02em; }
/* ── Pestañas / segmentado (la activa es una pieza de cristal más brillante) ─ */
.ecm-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.26); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.ecm-tab { border: 0; background: transparent; color: var(--ecm-text-muted); padding: 8px 16px; border-radius: 999px; font: 600 13px var(--ecm-font); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.ecm-tab:hover { color: var(--ecm-text); }
.ecm-tab.is-active, .ecm-tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.12)); color: #fff; box-shadow: var(--glass-rim), 0 4px 12px rgba(0, 0, 0, 0.35); }
.ecm-tab:focus-visible { outline: none; box-shadow: var(--ecm-glow); }
/* ── Tabla ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .ecm-table-wrap { border: 0; border-radius: 22px; overflow: hidden; }
.ecm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ecm-table th { text-align: left; padding: 12px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ecm-text-muted); background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid var(--ecm-border); white-space: nowrap; }
.ecm-table td { padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--ecm-text); vertical-align: middle; }
.ecm-table tr:last-child td { border-bottom: 0; }
.ecm-table tbody tr { transition: background .15s; }
.ecm-table tbody tr:hover td { background: rgba(255, 255, 255, 0.05); }
/* ── Modal ────────────────────────────────────────────────────────────────── */
.ecm-modal-back { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 12, 0.5); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.ecm-modal-back.is-open { display: flex; }
.ecm-modal { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 30px; padding: 28px;
background-image: var(--glass-sheen); background-color: rgba(24, 28, 46, 0.62);
-webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
box-shadow: var(--glass-rim), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
animation: ecmPop .32s var(--ecm-spring); }
.ecm-modal h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.02em; }
.ecm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
/* ── Estado vacío ─────────────────────────────────────────────────────────── */
.ecm-empty { text-align: center; padding: 48px 24px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 26px; background: rgba(255, 255, 255, 0.025); color: var(--ecm-text-muted); }
.ecm-empty .ecm-empty-ico { font-size: 36px; margin-bottom: 10px; filter: drop-shadow(0 6px 14px rgba(59, 130, 246, 0.4)); }
.ecm-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ecm-text); }
.ecm-empty p { margin: 0 auto; max-width: 420px; font-size: 13.5px; line-height: 1.55; }
/* ── Avisos (toast) ───────────────────────────────────────────────────────── */
.ecm-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ecm-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px)); padding: 11px 20px; border-radius: 999px;
background-image: var(--glass-sheen); background-color: rgba(26, 31, 50, 0.62);
-webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
box-shadow: var(--glass-rim), var(--glass-shadow); color: var(--ecm-text); font: 500 13.5px var(--ecm-font); animation: ecmPop .36s var(--ecm-spring); }
.ecm-toast.ok::before { content: '✓'; color: var(--ecm-success); font-weight: 800; }
.ecm-toast.err::before { content: '!'; color: var(--ecm-danger); font-weight: 800; }
.ecm-toast.out { opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity .2s, transform .2s; }
@keyframes ecmPop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
/* ═════════════════════════════════════════════════════════════════════════════
SHELL: barra lateral flotante de cristal + paleta Ctrl+K (prefijo es- = ecm shell)
═════════════════════════════════════════════════════════════════════════════ */
/* --es-w = ancho visible de la barra; --ecm-nav-w = lo que reserva el contenido (barra + márgenes) */
html[data-shell="sidebar"] { --es-w: 252px; --ecm-nav-w: 276px; }
html[data-shell="sidebar"][data-collapsed="1"] { --es-w: 64px; --ecm-nav-w: 88px; }
html[data-shell="sidebar"] body { padding-left: var(--ecm-nav-w); transition: padding-left .26s var(--ecm-ease); }
/* Marcador de sitio mientras carga (evita el salto); desaparece al montar la barra */
html[data-shell="sidebar"] body::before { content: ''; box-sizing: border-box; position: fixed; inset: 12px auto 12px 12px; width: var(--es-w); border-radius: 26px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); z-index: 790; transition: width .26s var(--ecm-ease); }
html[data-shell-ready] body::before { display: none; }
.es-side { box-sizing: border-box; position: fixed; inset: 12px auto 12px 12px; width: var(--es-w); z-index: 800; display: flex; flex-direction: column; border-radius: 26px;
background-image: var(--glass-sheen); background-color: var(--ecm-side-bg);
-webkit-backdrop-filter: blur(34px) saturate(1.9); backdrop-filter: blur(34px) saturate(1.9);
box-shadow: var(--glass-shadow); color: var(--ecm-text); font-family: var(--ecm-font); -webkit-font-smoothing: antialiased;
transition: width .26s var(--ecm-ease), transform .3s var(--ecm-ease); }
.es-side button { font-family: inherit; }
.es-side :focus-visible, .es-mbar :focus-visible { outline: none; box-shadow: var(--ecm-glow); }
.es-top { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; min-height: 62px; box-sizing: border-box; }
.es-brand { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; border-radius: 12px; }
.es-logo { width: 34px; height: 34px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; color: #fff;
background: linear-gradient(145deg, #7db3ff 0%, #3b82f6 45%, #22d3ee 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(0, 40, 120, 0.35), 0 8px 22px rgba(59, 130, 246, 0.5); }
.es-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.es-collapse { position: absolute; top: 24px; right: -13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; padding: 0; z-index: 2; color: var(--ecm-text);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.10)), rgba(24, 28, 46, 0.7);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: var(--glass-rim), 0 6px 16px rgba(0, 0, 0, 0.4); transition: transform .2s var(--ecm-spring), background .15s; }
.es-collapse:hover { transform: scale(1.12); }
.es-collapse svg { transition: transform .26s var(--ecm-ease); }
/* Selector de evento */
.es-event { position: relative; padding: 4px 12px 8px; }
.es-event-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 18px; border: 0; color: inherit; cursor: pointer; text-align: left; font-size: 13px; box-sizing: border-box;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); box-shadow: var(--glass-rim), 0 4px 12px rgba(0, 0, 0, 0.2); transition: background .15s, transform .18s var(--ecm-spring); }
.es-event-btn:hover, .es-event-btn[aria-expanded="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); }
.es-event-btn:active { transform: scale(0.98); }
.es-event-ico { width: 30px; height: 30px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff;
background: linear-gradient(145deg, rgba(125, 179, 255, 0.75), rgba(124, 92, 255, 0.7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(80, 100, 255, 0.35); }
.es-event-meta { min-width: 0; flex: 1; line-height: 1.25; }
.es-event-cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ecm-text-subtle); }
.es-event-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-caret { color: var(--ecm-text-muted); flex: 0 0 auto; }
/* Popovers (evento, usuario): dentro de la barra, así que llevan relleno casi opaco */
.es-pop { position: absolute; left: 12px; right: 12px; top: calc(100% - 2px); z-index: 5; max-height: 340px; overflow: auto; padding: 8px; border-radius: 22px;
background-image: var(--glass-sheen); background-color: var(--ecm-pop-bg);
box-shadow: var(--glass-rim), 0 24px 60px rgba(0, 0, 0, 0.55); animation: ecmPop .26s var(--ecm-spring); }
.es-pop[hidden] { display: none; }
.es-pop.up { top: auto; bottom: calc(100% + 8px); }
.es-pop-title { padding: 8px 12px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ecm-text-subtle); }
.es-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 14px; background: none; color: var(--ecm-text); font-size: 13.5px; cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box; transition: background .12s; }
.es-pop-item:hover { background: rgba(255, 255, 255, 0.09); }
.es-pop-item.is-current { background: linear-gradient(180deg, rgba(125, 179, 255, 0.3), rgba(59, 130, 246, 0.14)); color: #fff; box-shadow: var(--glass-rim); }
.es-pop-item .es-check { margin-left: auto; color: var(--ecm-accent-text); }
.es-pop-item.danger { color: #ff9b9b; }
.es-pop-sep { height: 1px; margin: 6px 6px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); }
/* Navegación */
.es-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.es-item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 14px; color: var(--ecm-text-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s, transform .18s var(--ecm-spring); box-sizing: border-box; }
.es-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--ecm-text); }
.es-item:active { transform: scale(0.98); }
.es-item.is-active { color: #fff; font-weight: 600; background: linear-gradient(180deg, rgba(135, 185, 255, 0.38), rgba(59, 130, 246, 0.18)); box-shadow: var(--glass-rim), 0 6px 16px rgba(59, 130, 246, 0.28); }
.es-ico { width: 22px; flex: 0 0 22px; text-align: center; font-size: 15px; line-height: 1; }
.es-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.es-ext { margin-left: auto; font-size: 11px; opacity: 0.55; }
.es-ghead { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ecm-text-subtle); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; text-align: left; box-sizing: border-box; transition: color .15s, background .15s; }
.es-ghead:hover { color: var(--ecm-text); background: rgba(255, 255, 255, 0.05); }
.es-ghead .es-ico { font-size: 13px; filter: saturate(0.9); }
.es-chev { margin-left: auto; transition: transform .22s var(--ecm-ease); }
.es-group.is-open .es-chev { transform: rotate(180deg); }
.es-gbody { display: none; flex-direction: column; gap: 3px; }
.es-group.is-open .es-gbody { display: flex; }
.es-count { margin-left: 4px; padding: 0 7px; height: 17px; line-height: 17px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); font-size: 10px; letter-spacing: 0; }
/* Parte baja */
.es-bottom { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18)); border-radius: 0 0 26px 26px; }
.es-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px; border-radius: 999px; border: 0; color: var(--ecm-text-muted); font-size: 13px; cursor: pointer; text-align: left; box-sizing: border-box;
background: rgba(0, 0, 0, 0.26); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.08); transition: color .15s, background .15s; }
.es-search:hover { color: var(--ecm-text); background: rgba(0, 0, 0, 0.34); }
.es-search .ecm-kbd { margin-left: auto; }
.es-user { position: relative; }
.es-userbtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 18px; background: none; color: inherit; cursor: pointer; text-align: left; box-sizing: border-box; transition: background .15s; }
.es-userbtn:hover { background: rgba(255, 255, 255, 0.08); }
.es-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(145deg, #7db3ff, #7c5cff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 12px rgba(100, 100, 255, 0.4); }
.es-uname { min-width: 0; flex: 1; line-height: 1.25; }
.es-uname b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-uname span { display: block; font-size: 11px; color: var(--ecm-text-subtle); }
.es-user .es-pop { left: 0; right: 0; }
/* Rail plegado (solo escritorio) */
@media (min-width: 881px) {
html[data-collapsed="1"] .es-brand-name,
html[data-collapsed="1"] .es-lbl,
html[data-collapsed="1"] .es-event-meta,
html[data-collapsed="1"] .es-caret,
html[data-collapsed="1"] .es-chev,
html[data-collapsed="1"] .es-count,
html[data-collapsed="1"] .es-ext,
html[data-collapsed="1"] .es-search .ecm-kbd,
html[data-collapsed="1"] .es-uname { display: none; }
html[data-collapsed="1"] .es-top { justify-content: center; padding: 16px 0 10px; }
html[data-collapsed="1"] .es-collapse svg { transform: rotate(180deg); }
html[data-collapsed="1"] .es-event { padding: 4px 8px 8px; }
html[data-collapsed="1"] .es-event-btn { justify-content: center; padding: 6px; }
html[data-collapsed="1"] .es-item,
html[data-collapsed="1"] .es-ghead,
html[data-collapsed="1"] .es-search,
html[data-collapsed="1"] .es-userbtn { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-collapsed="1"] .es-ghead { margin-top: 6px; }
html[data-collapsed="1"] .es-pop { right: auto; min-width: 232px; }
html[data-collapsed="1"] .es-user .es-pop { left: 0; right: auto; min-width: 200px; }
}
/* Paleta Ctrl+K */
.es-pal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; box-sizing: border-box; background: rgba(4, 6, 12, 0.46); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); font-family: var(--ecm-font); }
.es-pal.is-open { display: flex; }
.es-pal-box { position: relative; width: min(640px, 100%); border-radius: 30px; overflow: hidden; color: var(--ecm-text);
background-image: var(--glass-sheen); background-color: rgba(22, 26, 44, 0.6);
-webkit-backdrop-filter: blur(44px) saturate(1.9); backdrop-filter: blur(44px) saturate(1.9);
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04); animation: ecmPop .34s var(--ecm-spring); }
.es-pal-field { position: relative; }
.es-pal-field svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--ecm-text-muted); pointer-events: none; }
.es-pal-input { display: block; width: 100%; height: 60px; padding: 0 22px 0 54px; box-sizing: border-box; border: 0; outline: 0; background: transparent; color: var(--ecm-text); font: 400 17px var(--ecm-font); }
.es-pal-input::placeholder { color: var(--ecm-text-subtle); }
.es-pal-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.es-pal-sec { padding: 10px 14px 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ecm-text-subtle); }
.es-pal-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; cursor: pointer; transition: background .1s; }
.es-pal-row.is-sel { background: linear-gradient(180deg, rgba(135, 185, 255, 0.34), rgba(59, 130, 246, 0.16)); box-shadow: var(--glass-rim); }
.es-pal-row .es-ico { width: 26px; flex-basis: 26px; font-size: 18px; }
.es-pal-text { min-width: 0; flex: 1; }
.es-pal-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-pal-desc { font-size: 12px; color: var(--ecm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
.es-pal-tag { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: var(--glass-rim); font-size: 11px; color: var(--ecm-text-muted); }
.es-pal-empty { padding: 30px 16px; text-align: center; color: var(--ecm-text-muted); font-size: 13.5px; }
.es-pal-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.16); font-size: 11.5px; color: var(--ecm-text-subtle); }
.es-pal-foot span { display: inline-flex; align-items: center; gap: 6px; }
/* Móvil: la barra pasa a cajón y aparece una cápsula superior */
.es-mbar, .es-scrim { display: none; }
@media (max-width: 880px) {
html[data-shell="sidebar"] body { padding-left: 0; padding-top: 68px; }
html[data-shell="sidebar"] body::before { display: none; }
.es-side { inset: 8px auto 8px 8px; width: 284px; transform: translateX(calc(-100% - 16px)); }
.es-side.is-open { transform: none; }
.es-collapse { display: none; }
.es-mbar { display: flex; align-items: center; gap: 8px; position: fixed; top: 8px; left: 8px; right: 8px; height: 52px; padding: 0 8px; box-sizing: border-box; z-index: 780; border-radius: 26px; color: var(--ecm-text); font-family: var(--ecm-font);
background-image: var(--glass-sheen); background-color: var(--ecm-side-bg); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: var(--glass-shadow-sm); }
.es-mbtn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ecm-text); cursor: pointer; }
.es-mbtn:hover { background: rgba(255, 255, 255, 0.1); }
.es-mbar .es-brand { flex: 1; }
.es-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 795; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ecm-main { padding: 18px 16px 56px; }
}
/* ═════════════════════════════════════════════════════════════════════════════
PIEZAS DE PÁGINA: icono de cristal, chip, tarjeta de herramienta
═════════════════════════════════════════════════════════════════════════════ */
/* Icono sobre una pieza de cristal tintada. El tono sale de [data-cat] en un ancestro. */
.ecm-gem { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; font-size: 22px; line-height: 1; color: #fff;
background: linear-gradient(145deg, var(--gem-a, rgba(125, 179, 255, 0.6)), var(--gem-b, rgba(59, 130, 246, 0.25)));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 8px 20px var(--gem-glow, rgba(59, 130, 246, 0.3)); }
.ecm-gem.sm { width: 34px; height: 34px; border-radius: 12px; font-size: 17px; }
[data-cat="cams"] { --gem-a: rgba(125, 179, 255, 0.60); --gem-b: rgba(59, 130, 246, 0.25); --gem-glow: rgba(59, 130, 246, 0.30); }
[data-cat="brawl"] { --gem-a: rgba(255, 184, 100, 0.60); --gem-b: rgba(255, 120, 30, 0.25); --gem-glow: rgba(255, 140, 40, 0.28); }
[data-cat="cr"] { --gem-a: rgba(176, 148, 255, 0.60); --gem-b: rgba(124, 92, 255, 0.25); --gem-glow: rgba(124, 92, 255, 0.30); }
[data-cat="coc"] { --gem-a: rgba(120, 228, 160, 0.55); --gem-b: rgba(40, 190, 100, 0.22); --gem-glow: rgba(40, 190, 100, 0.26); }
[data-cat="show"] { --gem-a: rgba(255, 150, 206, 0.60); --gem-b: rgba(236, 72, 153, 0.25); --gem-glow: rgba(236, 72, 153, 0.28); }
[data-cat="utils"] { --gem-a: rgba(120, 224, 244, 0.60); --gem-b: rgba(34, 211, 238, 0.22); --gem-glow: rgba(34, 211, 238, 0.26); }
[data-cat="admin"] { --gem-a: rgba(255, 140, 140, 0.60); --gem-b: rgba(239, 68, 68, 0.25); --gem-glow: rgba(239, 68, 68, 0.28); }
/* Chip: acción pequeña (copiar URL, ir a…) o filtro */
[data-theme="dark"] .ecm-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; color: var(--ecm-text-muted); font: 600 12px var(--ecm-font); text-decoration: none; white-space: nowrap; cursor: pointer;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)); box-shadow: var(--glass-rim);
transition: background .15s, color .15s, transform .18s var(--ecm-spring); }
[data-theme="dark"] .ecm-chip:hover { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.08)); }
[data-theme="dark"] .ecm-chip:active { transform: scale(0.94); }
[data-theme="dark"] .ecm-chip:focus-visible { outline: none; box-shadow: var(--ecm-glow); }
[data-theme="dark"] .ecm-chip.is-done { color: #7be898; background: linear-gradient(180deg, rgba(90, 220, 130, 0.30), rgba(52, 199, 89, 0.12)); }
[data-theme="dark"] .ecm-chip.accent { color: #fff; background: linear-gradient(180deg, rgba(135, 185, 255, 0.45), rgba(59, 130, 246, 0.22)); }
.ecm-chip.lg { height: 36px; padding: 0 16px; font-size: 13px; }
.ecm-chip .n { opacity: 0.6; font-size: 11px; font-weight: 600; }
.ecm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
/* Tarjeta de herramienta: … */
.ecm-tile { display: flex; flex-direction: column; gap: 12px; padding: 18px; min-height: 140px; transition: transform .28s var(--ecm-spring), box-shadow .2s; }
.ecm-tile:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow); }
.ecm-tile-main { display: flex; flex-direction: column; gap: 10px; flex: 1; border-radius: 16px; text-decoration: none; color: inherit; }
.ecm-tile-main:focus-visible { outline: none; box-shadow: var(--ecm-glow); }
.ecm-tile-name { font-size: 15px; font-weight: 650; letter-spacing: -0.015em; color: var(--ecm-text); padding-right: 22px; }
.ecm-tile-desc { font-size: 12.5px; color: var(--ecm-text-muted); line-height: 1.4; }
.ecm-tile-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ecm-star { position: absolute; top: 12px; right: 12px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, 0.24); font-size: 16px; line-height: 1; cursor: pointer; transition: color .15s, transform .22s var(--ecm-spring), background .15s; }
.ecm-star:hover { color: rgba(255, 200, 60, 0.85); transform: scale(1.18); background: rgba(255, 255, 255, 0.07); }
.ecm-star.on { color: #ffc233; text-shadow: 0 0 14px rgba(255, 190, 40, 0.65); }
.ecm-star:focus-visible { outline: none; box-shadow: var(--ecm-glow); }
.ecm-tile.is-hidden, .ecm-section.is-hidden { display: none; }
/* ── Accesibilidad y compatibilidad ───────────────────────────────────────── */
/* Sin desenfoque (navegador antiguo o «reducir transparencia»): superficies casi opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
[data-theme="dark"] { --ecm-bg-elevated: #151a28; --ecm-side-bg: #0f1320; --ecm-pop-bg: #1a2032; }
.ecm-modal, .es-pal-box, .ecm-toast, .es-mbar { background-color: #171c2c; }
}
@media (prefers-reduced-transparency: reduce) {
[data-theme="dark"] { --ecm-bg-elevated: #151a28; --ecm-side-bg: #0f1320; --ecm-pop-bg: #1a2032; }
.ecm-modal, .es-pal-box, .ecm-toast, .es-mbar { background-color: #171c2c; }
}
@media (prefers-reduced-motion: reduce) {
[data-theme="dark"] body::after { animation: none; }
.es-side, .es-collapse, .es-collapse svg, html[data-shell="sidebar"] body, html[data-shell="sidebar"] body::before { transition: none; }
.es-pop, .es-pal-box, .ecm-modal, .ecm-toast { animation: none; }
}