/**
 * Gicell Academy — rebrand del dashboard de Tutor (frontend, modo claro).
 * Sidebar negro + body paper + acentos dorados monocromos + tipografía de marca.
 * Cargado solo en el dashboard de Tutor. Depende de gicell-tokens.css (global).
 * Tutor en modo claro (option default_theme=light).
 */

/* Remap de la escala de marca de Tutor a dorado (por si algún componente la usa). */
.tutor-dashboard-layout {
	--tutor-color-primary: #C9A86A;
	--tutor-color-primary-hover: #b8965a;
	--tutor-color-primary-rgb: 201, 168, 106;
	--tutor-brand-500: #C9A86A;
	--tutor-brand-600: #b8965a;
	--tutor-brand-700: #a5854b;
}

/* ═══════════ Fondo general → paper cálido ═══════════ */
.tutor-dashboard-main,
.tutor-dashboard-body,
.tutor-dashboard-page {
	background: var(--paper) !important;
	color: var(--ink);
}

/* ═══════════ Sidebar negro ═══════════ */
.tutor-dashboard-sidebar {
	background: #0E0E0E !important;
	border-right: none !important;
}
.tutor-dashboard-sidebar a {
	color: rgba(255, 255, 255, 0.72) !important;
}
.tutor-dashboard-sidebar a:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.04) !important;
}
/* Íconos del sidebar → champán tenue, monocromo. */
.tutor-dashboard-sidebar a svg,
.tutor-dashboard-sidebar a [class*="tutor-icon"] {
	color: var(--gold-soft) !important;
}
/* Item activo → acento dorado (barra lateral + texto/ícono claros). */
.tutor-dashboard-sidebar a.active {
	background: rgba(201, 168, 106, 0.14) !important;
	color: #fff !important;
	box-shadow: inset 3px 0 0 var(--gold);
}
.tutor-dashboard-sidebar a.active svg,
.tutor-dashboard-sidebar a.active [class*="tutor-icon"] {
	color: var(--gold) !important;
}
/* Logo del sidebar (imagen clara sobre negro). */
.tutor-dashboard-sidebar-logo img {
	max-height: 40px;
	width: auto;
}

/* ═══════════ Header del dashboard ═══════════ */
.tutor-dashboard-header,
.tutor-dashboard-content-inner > .tutor-row:first-child {
	color: var(--ink);
}

/* ═══════════ Stat cards → superficie clara + acentos dorados ═══════════ */
.tutor-stat-card {
	background: var(--white) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	box-shadow: none !important;
}
/* Íconos de las tarjetas (azul/teal/púrpura/naranja) → dorado. */
.tutor-stat-card-icon,
.tutor-stat-card-icon svg,
.tutor-stat-card-icon [class*="tutor-icon"] {
	color: var(--gold) !important;
	background: transparent !important;
}
/* Valores/números (teal/púrpura/naranja) → tinta, serif de marca. */
.tutor-stat-card-value {
	color: var(--ink) !important;
	font-family: var(--font-display) !important;
}
.tutor-stat-card-title {
	color: var(--muted) !important;
}

/* ═══════════ Tipografía de marca en encabezados ═══════════ */
.tutor-dashboard-page h1,
.tutor-dashboard-page h2,
.tutor-dashboard-page h3,
.tutor-dashboard-content-title {
	font-family: var(--font-display) !important;
}

/* ═══════════ Botones ═══════════ */
.tutor-dashboard .tutor-btn-primary,
.tutor-dashboard-page .tutor-btn-primary {
	background-color: var(--gold) !important;
	border-color: var(--gold) !important;
	color: #14110a !important;
}
.tutor-dashboard .tutor-btn-primary:hover,
.tutor-dashboard-page .tutor-btn-primary:hover {
	background-color: #b8965a !important;
	border-color: #b8965a !important;
}

/* Avatar redondo del header → tono de marca (era azul). */
.tutor-dashboard-header [class*="avatar"],
.tutor-dashboard [class*="tutor-avatar"] {
	background: linear-gradient(135deg, var(--black-2), var(--black)) !important;
	color: var(--gold-soft) !important;
}

/* Botón "primary-soft" (Switch to Learner, chips, etc.): azul → dorado suave. */
.tutor-dashboard-layout .tutor-btn-primary-soft {
	background-color: rgba(201, 168, 106, 0.14) !important;
	color: #96762f !important;
}
.tutor-dashboard-layout .tutor-btn-primary-soft svg,
.tutor-dashboard-layout .tutor-btn-primary-soft [class*="tutor-icon"] {
	color: #96762f !important;
}

/* Utilidad de color primario + nav móvil activo (azul residual) → dorado. */
.tutor-dashboard-layout .tutor-color-primary,
.tutor-dashboard-nav-mobile .active,
.tutor-dashboard-nav-mobile-text.active {
	color: var(--gold) !important;
}

/* ═══════════ Crear curso (form frontend custom) ═══════════ */
.gicell-cc { max-width: 760px; font-family: var(--font-body); color: var(--ink); }
.gicell-cc__head { margin-bottom: 24px; }
.gicell-cc__eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.gicell-cc__title { font-family: var(--font-display); font-weight: 500; font-size: 30px; margin: 0 0 8px; color: var(--ink); }
.gicell-cc__intro { color: var(--muted); font-size: 14px; margin: 0; }
.gicell-cc__notice { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 14px; }
.gicell-cc__notice--error { background: #fbeaea; color: #8a2b2b; border: 1px solid #ecc2c2; }
.gicell-cc__form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.gicell-cc__field { margin-bottom: 18px; display: flex; flex-direction: column; }
.gicell-cc__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.gicell-cc__field label { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
.gicell-cc__field label span { color: var(--gold); }
.gicell-cc__field small { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
.gicell-cc__field input,
.gicell-cc__field textarea,
.gicell-cc__field select {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 14px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}
.gicell-cc__field input:focus,
.gicell-cc__field textarea:focus,
.gicell-cc__field select:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.16);
}
.gicell-cc__field textarea { resize: vertical; }
.gicell-cc__actions { margin-top: 8px; }
.gicell-cc__submit {
	background: var(--gold);
	color: #14110a;
	border: 1px solid var(--gold);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 13px 28px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.25s ease;
}
.gicell-cc__submit:hover { background: #b8965a; border-color: #b8965a; }
@media (max-width: 640px) { .gicell-cc__row { grid-template-columns: 1fr; } }

/* ═══════════ UX-audit: azules residuales de Tutor → dorado ═══════════
   Selectores verificados en vivo: .tutor-nav-item.active (P y R en Discussions),
   .tutor-tabs-tab-active (tabs de Ajustes), .tutor-btn-link ("Todos"),
   .tutor-text-secondary (gris frío), .tutor-account-cover-photo (cover default). */
.tutor-nav-item.active,
.tutor-tabs-tab.tutor-tabs-tab-active {
	background-color: rgba(201, 168, 106, 0.14) !important;
	color: #96762f !important;
}
.tutor-nav-item.active svg,
.tutor-tabs-tab.tutor-tabs-tab-active svg,
.tutor-tabs-tab.tutor-tabs-tab-active [class*="tutor-icon"] {
	color: #96762f !important;
}
.tutor-btn-link {
	color: var(--gold) !important;
}
.tutor-text-secondary {
	color: var(--muted) !important;
}

/* Páginas isolated (Ajustes / cuenta / perfil): fondo paper + serif + cover de marca. */
.tutor-account-page-wrapper,
.tutor-profile-settings-section {
	background: var(--paper);
}
.tutor-account-page-wrapper h1,
.tutor-account-page-wrapper h2,
.tutor-profile-header h1,
.tutor-profile-header h2 {
	font-family: var(--font-display) !important;
}
.tutor-account-cover-photo {
	background-image: none !important;
	background: linear-gradient(135deg, #232323, #0E0E0E) !important;
}