@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap'); :root { color-scheme: dark; --bg: #0a0c0f; --bg-elev: #14171d; --bg-elev-2: #1b1f26; --bg-elev-3: #232833; --bg-sidebar: #0e1116; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --accent: #6d28d9; --accent-2: #4f46e5; --text: #f2f3f5; --text-dim: #9aa2ab; --text-faint: #6b7280; --success: #35d07f; --danger: #ff5459; --info: #4d9fff; --warning: #d97706; --stats: #7c3aed; --radius: 14px; --radius-sm: 9px; --shadow-card: 0 2px 10px rgba(0,0,0,0.18), 0 10px 30px -12px rgba(0,0,0,0.35); --shadow-pop: 0 12px 34px -8px rgba(0,0,0,0.5); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } * { box-sizing: border-box; } /* ============================================================ TEMA CLARO — activado por el interruptor en Configuración → Marca (data-theme="light" en , valor por defecto de la plataforma). Los colores de marca (--accent/--accent-2/--info) NO cambian entre temas — solo la superficie (fondo/texto/bordes/sombras). ============================================================ */ [data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --bg-elev: #ffffff; --bg-elev-2: #eef1f5; --bg-elev-3: #e4e8ee; --bg-sidebar: #ffffff; --border: rgba(15,23,42,0.08); --border-strong: rgba(15,23,42,0.14); --text: #1a1d23; --text-dim: #667085; --text-faint: #98a1b3; --success: #16a34a; --danger: #dc2626; --danger-text: #c62828; /* Mismo motivo que en public/assets/css/style.css: --info y --warning del tema oscuro no pasan contraste WCAG AA sobre fondo claro — afinados aquí solo para este tema, misma familia de color. */ --info: #1d6fd6; --warning: #b45309; --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.12); --shadow-pop: 0 16px 40px -12px rgba(15,23,42,0.22); } [data-theme="light"] html { scrollbar-color: rgba(15,23,42,0.18) transparent; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.14); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.24); } [data-theme="light"] .sidebar { border-right: 1px solid var(--border); box-shadow: 2px 0 12px -6px rgba(15,23,42,0.08); } [data-theme="light"] .form-error { color: #b3261e; } [data-theme="light"] .nav-link.active { color: var(--accent-2); } [data-theme="light"] table.data-table td { border-bottom: 1px solid rgba(15,23,42,0.06); } [data-theme="light"] table.data-table tr:hover td { background: rgba(15,23,42,0.02); } [data-theme="light"] .tag.offline { background: rgba(15,23,42,0.05); } html { scrollbar-color: rgba(255,255,255,0.18) transparent; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 100px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); } ::selection { background: rgba(109,40,217,0.35); } /* ---------- Login ---------- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 50%), var(--bg); padding: 20px; } .login-card { width: 100%; max-width: 360px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 32px; text-align: center; box-shadow: var(--shadow-pop); } .login-card .brand-mark { width: 42px; height: 42px; border-radius: 11px; margin: 0 auto 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--btn-text, #ffffff); box-shadow: 0 6px 20px -4px rgba(109,40,217,0.5); } .login-card h1 { font-family: var(--font-display); font-size: 19px; margin: 0 0 2px; } .login-card .sub { color: var(--text-dim); font-size: 12.5px; margin: 0 0 22px; } .login-card .hint { color: var(--text-dim); font-size: 11.5px; margin-top: 16px; } .field { text-align: left; margin-bottom: 13px; } .field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; font-weight: 500; } .field input, .field select, .field textarea { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--input-text, var(--text)); font-size: 13.5px; outline: none; font-family: var(--font-body); transition: border-color .15s ease, box-shadow .15s ease; } .field input[type="password"] { color: var(--input-text, var(--text)) !important; } .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--input-text, var(--text)) !important; -webkit-box-shadow: 0 0 0 1000px var(--bg-elev-2) inset !important; caret-color: var(--text); transition: background-color 5000s ease-in-out 0s; } .password-wrap { position: relative; } .password-wrap input { width: 100%; padding-right: 40px; } .password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-dim); padding: 6px; border-radius: 6px; } .password-toggle:hover { color: var(--text); background: var(--bg-elev-3, var(--bg-elev)); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,40,217,0.15); } .btn-primary { width: 100%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--btn-text, #ffffff); border: none; padding: 12px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 4px 16px -4px rgba(109,40,217,0.45); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -4px rgba(109,40,217,0.55); } .btn-primary:active { transform: translateY(0); } .form-error { background: rgba(255,84,89,0.1); border: 1px solid rgba(255,84,89,0.35); color: #ffb3b4; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 14px; } /* ---------- Shell / layout ---------- */ .shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; transition: transform .25s ease; } .sidebar .brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 22px; } .sidebar .brand .brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--btn-text, #ffffff); font-size: 14px; box-shadow: 0 4px 14px -3px rgba(109,40,217,0.5); flex-shrink: 0; } .sidebar .brand .name { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13.5px; font-weight: 500; transition: background .13s ease, color .13s ease; } .nav-badge { margin-left: auto; background: var(--danger, #e5484d); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .nav-link:hover { background: var(--bg-elev); color: var(--text); } .nav-link.active { background: linear-gradient(90deg, rgba(109,40,217,0.16), rgba(109,40,217,0.05)); color: var(--accent-2); border: 1px solid rgba(109,40,217,0.28); font-weight: 600; } .nav-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); padding: 15px 12px 6px; font-weight: 700; } .sidebar-footer { margin-top: auto; padding: 14px 8px 4px; font-size: 10.5px; color: var(--text-faint); border-top: 1px solid var(--border); margin-top: 12px; padding-top: 14px; } /* Menú móvil: el sidebar entra como cajón deslizante con fondo oscuro detrás */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 39; backdrop-filter: blur(2px); } .mobile-menu-btn { display: none; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: var(--radius-sm); align-items: center; justify-content: center; font-size: 17px; cursor: pointer; flex-shrink: 0; } .mobile-menu-btn:hover { border-color: var(--accent); } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-100%); box-shadow: var(--shadow-pop); } .shell.nav-open .sidebar { transform: translateX(0); } .shell.nav-open .sidebar-backdrop { display: block; } .mobile-menu-btn { display: flex; } .main { padding: 16px 16px 32px; } .topbar h1 { font-size: 18px; } } .main { padding: 22px 28px 44px; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 10; background: linear-gradient(var(--bg) 78%, transparent); padding: 10px 0 14px; margin-top: -10px; } .topbar > div:first-child { display: flex; align-items: center; gap: 12px; } .topbar h1 { font-family: var(--font-display); font-size: 22px; margin: 0; letter-spacing: -0.01em; } .topbar .page-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; } .topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .event-select { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text); font-size: 13px; } .logout-link { color: var(--text-dim); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; transition: color .13s ease; } .logout-link:hover { color: var(--danger); } /* ---------- KPI cards ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; gap: 14px; margin-bottom: 22px; } .quick-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; } .quick-access-group-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 8px; font-weight: 700; } .quick-access-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 500; margin-bottom: 2px; transition: background .13s ease, color .13s ease, transform .13s ease; } .quick-access-link:hover { background: var(--bg-elev-2); color: var(--accent-2); transform: translateX(2px); } .quick-access-link span { font-size: 15px; } .kpi-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 19px; position: relative; overflow: hidden; height: auto; align-self: start; box-shadow: var(--shadow-card); transition: transform .15s ease, border-color .15s ease; } .kpi-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } .kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.9; } .kpi-card.kpi-success::before { background: linear-gradient(90deg, var(--success), #7ee8ac); } .kpi-card.kpi-info::before { background: linear-gradient(90deg, var(--info), #8fc4ff); } .kpi-card.kpi-stats::before { background: linear-gradient(90deg, var(--stats), #c4b5fd); } .kpi-card.kpi-warning::before { background: linear-gradient(90deg, var(--warning), #fcd34d); } .kpi-card .label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 9px; display:flex; align-items:center; justify-content:space-between; font-weight: 600; } .kpi-card .value { font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -0.01em; } .kpi-card .value.accent { color: var(--accent-2); } .kpi-card .value.success { color: var(--success); } .kpi-card .delta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 6px; } .kpi-card .icon-corner { position: absolute; top: 14px; right: 14px; opacity: 0.4; font-size: 18px; } .kpi-spark { width:100%; height:34px; max-height:34px; margin-top:8px; display:block; } /* ---------- Chart panels & custom legend ---------- */ .chart-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 4px; flex-wrap: wrap; gap: 8px; } .chart-total-tag { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); background: var(--bg-elev-2); border:1px solid var(--border); padding: 3px 9px; border-radius: 100px; } .chart-box { position: relative; height: 260px; width: 100%; margin-top: 10px; } .chart-box-donut { height: 240px; max-width: 320px; margin-left: auto; margin-right: auto; } @media (max-width: 700px) { .chart-box { height: 220px; } .chart-box-donut { height: 200px; } } .chart-legend { display:flex; flex-wrap:wrap; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .chart-legend .legend-item { display:flex; align-items:center; gap: 6px; font-size: 11.5px; color: var(--text-dim); } .chart-legend .legend-item .swatch { width:9px; height:9px; border-radius: 3px; flex-shrink:0; } .chart-legend .legend-item b { color: var(--text); font-family: var(--font-mono); margin-left: 2px; } .rank-list { display:flex; flex-direction:column; gap: 12px; } .rank-row { display:grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; align-items:center; font-size: 12.5px; } .rank-row .rank-num { grid-column: 1; grid-row: 1 / 3; font-family: var(--font-mono); color: var(--text-dim); font-size: 11px; align-self:center; } .rank-row .rank-name { grid-column: 2; grid-row: 1; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .rank-row .rank-count { grid-column: 3; grid-row: 1; font-family: var(--font-mono); font-weight: 600; color: var(--text); } .rank-row .rank-bar-track { grid-column: 2 / 4; grid-row: 2; height: 6px; border-radius: 100px; background: var(--bg-elev-2); overflow: hidden; } .rank-row .rank-bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } /* ---------- Panels / cards ---------- */ .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-card); } /* Popup de "Ayuda / Recorrido" (driver.js): usa las mismas variables del tema activo en vez de colores fijos, para que el fondo y el texto siempre tengan buen contraste entre sí sin importar si el tema es claro u oscuro, o qué colores tenga. */ /* Popup de "Ayuda / Recorrido" (driver.js): paleta FIJA, independiente de la 🎨 Marca de la plataforma — así el recorrido de bienvenida se ve igual sin importar qué tema tengas activo (evita que colores poco comunes lo hagan ilegible). */ /* [Eliminado] El estilo real y activo del recorrido guiado (driver.js) vive en admin/partials/head.php — se carga después de este archivo, así que este bloque viejo (tema claro, fijo) ya no tenía ningún efecto. Se quita para no dejar dos fuentes de verdad compitiendo por los mismos selectores. */ /* --- Preguntas al ponente (admin): resaltado por estado --- */ .qa-admin-card { border-left: 4px solid var(--border); transition: background .3s, border-color .3s; } .qa-admin-card.pending { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, transparent); } .qa-admin-card.answered { border-left-color: var(--success); background: rgba(53,208,127,0.06); } .qa-admin-card.hidden { opacity: 0.55; } .qa-admin-text { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; } .qa-admin-answer { margin-top: 10px; background: rgba(53,208,127,0.1); border: 1px solid rgba(53,208,127,0.3); border-radius: 8px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; } .qa-admin-answer-label { display: block; color: var(--success); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; } .panel-head h2 { font-family: var(--font-display); font-size: 15.5px; margin: 0; letter-spacing: -0.005em; } .panel-head .panel-sub { color: var(--text-dim); font-size: 11.5px; } .grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; align-items: start; gap: 18px; } @media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.data-table th { text-align: left; padding: 11px 13px; color: var(--text-dim); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } table.data-table td { padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; } table.data-table tr:hover td { background: rgba(255,255,255,0.025); } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-family: var(--font-mono); font-weight: 500; } .tag.online { background: rgba(53,208,127,0.12); color: var(--success); border: 1px solid rgba(53,208,127,0.3); } .tag.offline { background: rgba(255,255,255,0.06); color: var(--text-dim); border: 1px solid var(--border); } .tag.blocked { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-text, var(--danger)); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .tag.flagged { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12.5px; cursor: pointer; font-weight: 500; transition: border-color .13s ease, transform .1s ease, background .13s ease; } .btn:hover { border-color: var(--accent); background: var(--bg-elev-3); } .btn:active { transform: scale(.97); } .btn.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--btn-text, #ffffff); border: none; font-weight: 600; box-shadow: 0 4px 14px -4px rgba(109,40,217,0.5); } .btn.btn-accent:hover { filter: brightness(1.05); } .btn.btn-danger { color: var(--danger-text, var(--danger)); } .btn.btn-danger:hover { border-color: var(--danger); } .btn.btn-sm { padding: 5px 10px; font-size: 11.5px; } /* ---------- Filters ---------- */ .filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .filter-row input, .filter-row select { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; color: var(--text); font-size: 12.5px; } /* ---------- Misc ---------- */ .empty-state { text-align: center; padding: 44px 20px; color: var(--text-dim); font-size: 13px; } .badge-count { background: var(--bg-elev-2); border-radius: 100px; padding: 2px 8px; font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); } .two-col-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .two-col-form { grid-template-columns: 1fr; } } .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); gap: 14px; } .switch-row:last-child { border-bottom: none; } .switch-row .desc { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; } /* ---------- Secciones dentro de formularios largos (ej. Eventos / salas) ---------- */ .form-section { margin-bottom: 26px; } .form-section:last-of-type { margin-bottom: 0; } .form-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .form-section-head .num { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-elev-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex-shrink: 0; } .form-section-head h3 { font-family: var(--font-display); font-size: 14.5px; margin: 0; } .form-section-head .form-section-sub { color: var(--text-dim); font-size: 11.5px; margin-top: 1px; } .form-section-body { padding-left: 34px; } @media (max-width: 640px) { .form-section-body { padding-left: 0; } } /* ---------- Pestañas de formulario (estilo CRM) ---------- */ .form-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0; -webkit-overflow-scrolling: touch; } .form-tab-btn { display: flex; align-items: center; gap: 7px; background: none; border: none; color: var(--text-dim); padding: 11px 15px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .13s ease, border-color .13s ease; } .form-tab-btn:hover { color: var(--text); } .form-tab-btn.active { color: var(--accent-2); border-bottom-color: var(--accent); } .form-tab-pane { display: none; } .form-tab-pane.active { display: block; } @keyframes formTabFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .form-tab-pane.active { animation: formTabFade .2s ease; } .toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg-elev-2); border: 1px solid var(--info); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; z-index: 999; box-shadow: var(--shadow-pop); } canvas { max-width: 100%; } /* ---------- Responsive: tablas y formularios en pantallas angostas ---------- */ @media (max-width: 640px) { .panel { padding: 16px; } .kpi-grid, .quick-access-grid { grid-template-columns: 1fr 1fr; } table.data-table { font-size: 12px; } .panel-head { align-items: flex-start; } } @media (max-width: 420px) { .kpi-grid, .quick-access-grid { grid-template-columns: 1fr; } } /* ---------- Tarjetas de evento para móvil (reemplazan la tabla — nada de deslizar hacia los lados, todo el dato visible apilado de un tirón) ---------- */ .mobile-event-cards { display: none; flex-direction: column; gap: 10px; } .event-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .event-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; } .event-card-header-text { min-width: 0; } .event-card-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-card-client { color: var(--text-dim); font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-card-chevron { flex-shrink: 0; color: var(--text-dim); transition: transform .18s ease; font-size: 12px; } .event-card.expanded .event-card-chevron { transform: rotate(180deg); } .event-card-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); } .event-card.expanded .event-card-body { display: block; padding-top: 10px; } .event-card-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .event-card-row:last-of-type { border-bottom: none; } .event-card-row .label { color: var(--text-dim); } .event-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .event-card-actions .btn { flex: 1 1 auto; justify-content: center; } @media (max-width: 640px) { .table-wrap { display: none; } .mobile-event-cards { display: flex; } } /* --- Panel de video (Jitsi): más compacto en pantallas angostas --- */ @media (max-width: 700px) { #jitsiContainer { height: 340px !important; } }