/* ═══════════════════════════════════════════════════════════════════════
   COCOZI ESTUDIO — los 4 paneles ADMIN con la identidad de la web y de los
   paneles del streamer (06/10/2026). Se carga después de admin-comun.css.
   Solo colores, tipografía e iconos: la maquetación es la de siempre.
   body.cz-admin[data-cz-plat] lo ponen las páginas; los iconos SVG de
   [data-ico] los pinta assets/comun/js/cz-estudio.js.
   ═══════════════════════════════════════════════════════════════════════ */
body.cz-admin {
  --ce-pagina: #131520; --ce-sup: #1a1c2a; --ce-sup-2: #222536; --ce-hondo: #0e0f18;
  --ce-tinta: #e8e6e1; --ce-tinta-70: rgba(232,230,225,.70); --ce-tinta-45: rgba(232,230,225,.58);
  --ce-linea: rgba(232,230,225,.09); --ce-linea-2: rgba(232,230,225,.17);
  --ce-ambar: #ffb43d;
  --ce-acento: #a970ff; --ce-acento-rgb: 169,112,255;
  --ce-display: 'Bricolage Grotesque', 'Syne', system-ui, sans-serif;
  --ce-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --bg: var(--ce-pagina); --bg2: var(--ce-sup); --bg3: var(--ce-sup-2);
  --text: var(--ce-tinta); --muted: rgba(232,230,225,.64); --border: var(--ce-linea);
  background: var(--ce-pagina); color: var(--ce-tinta);
}
body.cz-admin[data-cz-plat="kick"]    { --ce-acento: #7bfb29; --ce-acento-rgb: 123,251,41; }
body.cz-admin[data-cz-plat="youtube"] { --ce-acento: #ff5c5c; --ce-acento-rgb: 255,92,92; }
body.cz-admin[data-cz-plat="tiktok"]  { --ce-acento: #ff3d82; --ce-acento-rgb: 255,61,130; }

.cz-admin [data-ico] svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── Menú lateral ── */
.cz-admin .sidebar { background: var(--ce-hondo); border-right-color: var(--ce-linea); }
.cz-admin .sidebar-logo, .cz-admin .sidebar-logo-inner {
  font-family: var(--ce-display); font-weight: 800; letter-spacing: -.02em;
  background: none; -webkit-text-fill-color: currentColor; color: var(--ce-tinta);
}
.cz-admin .sidebar-label {
  font-family: var(--ce-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ce-tinta-45);
  display: flex; align-items: center; gap: 10px; padding-right: 20px;
}
.cz-admin .sidebar-label::after { content: ""; flex: 1; height: 1px; background: var(--ce-linea); }
.cz-admin .sidebar-bot-link a { font-family: var(--ce-mono); font-size: 11px; }
.cz-admin .nav-item { position: relative; padding: 10px 14px; border-radius: 10px; color: var(--ce-tinta-70); border: 1px solid transparent; }
.cz-admin .nav-item:hover { background: rgba(232,230,225,.045); color: var(--ce-tinta); }
.cz-admin .nav-item.active { background: rgba(var(--ce-acento-rgb), .11); border-color: rgba(var(--ce-acento-rgb), .22); color: var(--ce-tinta); }
.cz-admin .nav-item.active::before {
  content: ""; position: absolute; left: -13px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ce-acento);
}
.cz-admin .nav-item .nav-icon[data-ico] { width: 19px; height: 19px; font-size: 0; color: var(--ce-tinta-45); }
.cz-admin .nav-item.active .nav-icon[data-ico] { color: var(--ce-acento); }
.cz-admin .nav-item .nav-badge { font-family: var(--ce-mono); font-weight: 600; background: rgba(var(--ce-acento-rgb), .9); color: #131520; }
.cz-admin .nav-item .nav-badge.green { background: #4ade80; }
.cz-admin .logout-btn { background: transparent; border-color: var(--ce-linea-2); color: var(--ce-tinta-70); }
.cz-admin .logout-btn:hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.4); color: #fca5a5; }

/* ── Barra de arriba y títulos ── */
.cz-admin .topbar { background: rgba(19,21,32,.86); border-bottom-color: var(--ce-linea); }
.cz-admin .topbar-title, .cz-admin .section-heading, .cz-admin .modal h2, .cz-admin .modal h3 { font-family: var(--ce-display); letter-spacing: -.015em; }
.cz-admin .topbar-title { font-weight: 800; font-size: 24px; }
.cz-admin .topbar-status { font-family: var(--ce-mono); font-size: 11px; }

/* ── Tarjetas de cifras ── */
.cz-admin .stat-card { background: var(--ce-sup); border-color: var(--ce-linea); border-radius: 16px; }
.cz-admin .stat-card:hover { border-color: rgba(var(--ce-acento-rgb), .35); }
.cz-admin .stat-icon[data-ico] {
  width: 38px; height: 38px; padding: 8px; border-radius: 10px; font-size: 0;
  background: rgba(var(--ce-acento-rgb), .10); color: var(--ce-acento); border: 1px solid rgba(var(--ce-acento-rgb), .18);
}
.cz-admin .stat-num {
  font-family: var(--ce-display); font-weight: 800; letter-spacing: -.03em;
  background: none; -webkit-text-fill-color: currentColor; color: var(--ce-tinta);
}
.cz-admin .stat-label { color: var(--ce-tinta-70); }

/* ── Tablas y etiquetas ── */
.cz-admin th, .cz-admin .table-header, .cz-admin .toggles-fila-label {
  font-family: var(--ce-mono); font-weight: 500; letter-spacing: .12em; color: var(--ce-tinta-45);
}
.cz-admin input, .cz-admin select, .cz-admin textarea { accent-color: var(--ce-acento); }
.cz-admin input:focus, .cz-admin select:focus, .cz-admin textarea:focus { border-color: rgba(var(--ce-acento-rgb), .6) !important; outline: none; }

/* ── Modal «Editar canal» ── */
.cz-admin .modal { background: #171927; border-color: var(--ce-linea-2); }
.cz-admin .modal-section-title, .cz-admin .modal-label { font-family: var(--ce-mono); letter-spacing: .12em; }

/* Enlace a cocozi.app: icono de «abre fuera» en vez del 🤖 */
.cz-admin .cz-ext { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; opacity: .8; }
.cz-admin .cz-ext svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }