/* ══════════════════════════════════════════════════════════════
AE Tutor Templates — Dashboard
Tutor LMS 4.0+ construye todo el Dashboard (y el área de aprendizaje)
sobre un sistema de theming propio: custom properties --tutor-* que
cambian según [data-tutor-theme="light|dark|system"] en el .
En vez de pelear contra su HTML/JS (es un shortcode, no un template
de archivo como single-course), re-tematizamos REDEFINIENDO esas
mismas variables con la paleta cream/brown — así se hereda a todos
los componentes (sidebar, tarjetas, botones, tabs) sin tocar PHP.
Ver la nota grande en ae-tutor-templates.php.
Este archivo NO se carga en /dashboard/create-course/ ni
/dashboard/create-bundle/ (ver ae_tt_is_dashboard_page(), que las
excluye a propósito) — son vistas aisladas con su propia UI nativa en
blanco, y de hecho reskinearlas rompía visualmente el panel que
CartFlows agrega ahí (plantilla de checkout para no-inscriptos), que
no tiene fondo propio y heredaba el cream de acá. Si algo del
constructor de cursos se ve "raro" (fondo cream donde debería ser
blanco), no es este archivo — revisar primero si Tutor o algún addon
agregó ahí un componente con fondo transparente.
══════════════════════════════════════════════════════════════ */
html[data-tutor-theme] {
/* Paleta base (mismas variables que single-course.css) */
--cream: #F6F6F7;
--cream-2: #EFEFF1;
--cream-3: #E7E7EA;
--brown: #2B1B0F;
--brown-dk: #4A3020;
--brown-mid: #6E6E78;
--brown-lt: #D6D6DB;
--text: #16161A;
--text-2: #56565E;
--text-3: #8C8C96;
--white: #FFFFFF;
--border: #E7E7EA;
/* Verde de progreso: el de Tutor es un verde frío de sistema. Se pasa al
verde del tema (el del badge "% OFF" de la página de venta) para que
"completado" no rompa la paleta cálida. Los nombres de token salen de
tutor-core.min.css (.tutor-progress-bar-fill). */
--tutor-actions-success-primary: #35682F;
--tutor-actions-success-secondary: #4C8243;
--tutor-color-success: #35682F;
--tutor-color-success-rgb: 53, 104, 47;
/* Escala numerada "brand" — Tutor no la define en ningún lado (solo la
referencia con fallback azul, ej. var(--tutor-brand-600,#3e64de)),
así que definirla acá alcanza para recolorear TODO lo que use esa
escala (botones, tabs activos, íconos de marca, etc.) sin tener que
pisar cada token semántico uno por uno. */
--tutor-brand-50: #FFFFFF;
--tutor-brand-100: #F6F6F7;
--tutor-brand-200: #EFEFF1;
--tutor-brand-300: #E7E7EA;
--tutor-brand-400: #C9A47C;
--tutor-brand-500: #B99067;
--tutor-brand-600: #A87B52;
--tutor-brand-700: #6B4229;
--tutor-brand-800: #5B3925;
--tutor-brand-900: #4A3020;
--tutor-brand-950: #2B1B0F;
/* Tipografía — Tutor ya expone estos dos hooks, así que alcanza con
redefinirlos para que todo el dashboard use Montserrat. */
--tutor-font-family-body: 'Montserrat', -apple-system, sans-serif;
--tutor-font-family-heading: 'Montserrat', -apple-system, sans-serif;
/* Superficies: todo pasa de la escala de grises/oscuro por defecto a
cream/blanco. */
--tutor-surface-base: var(--cream);
--tutor-surface-l1: var(--white);
--tutor-surface-l1-hover: var(--cream-2);
--tutor-surface-l2: var(--cream-2);
--tutor-surface-l2-hover: var(--cream-3);
--tutor-surface-l3: var(--cream);
--tutor-surface-sidebar-l1: var(--white);
--tutor-surface-dark: var(--brown-dk);
--tutor-surface-brand-primary: var(--brown-dk);
--tutor-surface-brand-primary-2: var(--brown);
--tutor-surface-brand-secondary: var(--cream-2);
--tutor-surface-brand-tertiary: var(--cream);
--tutor-surface-brand-quaternary:var(--cream-2);
/* Texto */
--tutor-text-primary: var(--text);
--tutor-text-primary-inverse: var(--white);
--tutor-text-secondary: var(--text-2);
--tutor-text-subdued: var(--text-3);
--tutor-text-disabled: var(--cream-3);
--tutor-text-brand: var(--brown-dk);
--tutor-text-brand-hover: var(--brown);
--tutor-text-brand-secondary: var(--brown-mid);
/* Íconos (SVG, no icon-font — se colorean por currentColor/fill vía estos tokens) */
--tutor-icon-idle: var(--text-2);
--tutor-icon-hover: var(--brown-dk);
--tutor-icon-secondary: var(--text-3);
--tutor-icon-subdued: var(--text-3);
--tutor-icon-disabled: var(--cream-3);
--tutor-icon-brand: var(--brown-dk);
--tutor-icon-brand-hover: var(--brown);
/* Botones */
--tutor-button-primary: var(--brown-dk);
--tutor-button-primary-hover: var(--brown);
--tutor-button-primary-focused: var(--brown-dk);
--tutor-button-primary-disabled: var(--brown-lt);
--tutor-button-primary-soft: var(--cream-2);
--tutor-button-primary-soft-hover: var(--cream-3);
--tutor-button-secondary: var(--cream-2);
--tutor-button-secondary-hover: var(--cream-3);
--tutor-button-outline-hover: var(--cream-2);
--tutor-button-ghost-hover: var(--cream-2);
/* Bordes */
--tutor-border-idle: var(--border);
--tutor-border-idle2: var(--border);
--tutor-border-hover: var(--brown-lt);
--tutor-border-tertiary: var(--text-3);
--tutor-border-brand: var(--brown-dk);
--tutor-border-brand-secondary: var(--brown-lt);
/* Tabs / navegación interna */
--tutor-tab-sidebar-l2: var(--white);
--tutor-tab-sidebar-l2-hover: var(--cream-2);
--tutor-tab-sidebar-l2-active: var(--cream-2);
--tutor-tab-sidebar-l4-hover: var(--cream-2);
--tutor-tab-sidebar-l4-active: var(--cream-2);
--tutor-tab-l3: var(--cream-2);
--tutor-tab-l3-hover: var(--cream-3);
--tutor-tab-l3-active: var(--cream-2);
/* Acciones (chips/badges de estado) */
--tutor-actions-brand-primary: var(--brown-dk);
--tutor-actions-brand-secondary: var(--cream-2);
--tutor-actions-brand-tertiary: var(--cream);
--tutor-actions-gray-empty: var(--cream);
--tutor-actions-gray-secondary: var(--cream-2);
--tutor-actions-gray-tertiary: var(--cream-2);
--tutor-actions-gray-quaternary: var(--cream-3);
/* Visual (gráficos / charts de stats) */
--tutor-visual-brand-1: var(--brown-dk);
--tutor-visual-brand-2: var(--brown-mid);
--tutor-visual-brand-3: var(--brown-lt);
--tutor-visual-gray-1: var(--white);
--tutor-visual-gray-2: var(--cream-2);
--tutor-visual-gray-3: var(--cream-3);
/* Sombras — mismo tono cálido que el resto del sitio en vez del gris azulado por defecto */
--tutor-shadow-xs: 0px 1px 2px 0px rgba(78,53,32,.05);
--tutor-shadow-sm: 0px 1px 2px 0px rgba(78,53,32,.06), 0px 1px 3px 0px rgba(78,53,32,.08);
--tutor-shadow-md: 0px 2px 4px -2px rgba(78,53,32,.06), 0px 4px 8px -2px rgba(78,53,32,.10);
--tutor-shadow-lg: 0px 4px 6px -2px rgba(78,53,32,.04), 0px 12px 16px -4px rgba(78,53,32,.10);
--tutor-shadow-xl: 0px 8px 8px -4px rgba(78,53,32,.04), 0px 20px 24px -4px rgba(78,53,32,.10);
/* Tokens neutros/estructurales que faltaban (encontrados probando en
vivo: el botón de filtro de fecha quedaba con fondo oscuro y texto
oscuro encima — usa "-inverse", una familia de tokens separada de
surface-l1). Los de éxito/alerta/error/advertencia y las "exception"
(usadas para categorías de estado como Certificado/Cancelado) se
dejan TAL CUAL vienen de Tutor a propósito — son colores con
significado semántico, no deberían pasar a marrón. */
--tutor-button-outline-inverse: var(--white);
--tutor-button-outline-focused-inverse: var(--white);
--tutor-button-disabled: var(--cream-2);
--tutor-button-secondary-focused: var(--cream-2);
--tutor-button-primary-soft-focused: var(--cream-2);
--tutor-border-inverse: var(--white);
--tutor-border-dark: var(--brown-dk);
--tutor-icon-idle-inverse: var(--white);
--tutor-quiz-idle: var(--cream);
--tutor-quiz-hover: var(--cream-2);
--tutor-actions-inverse: var(--white);
--tutor-text-highlighted-hover: var(--text-2);
--tutor-text-light: var(--white);
}
/* ─── Ajustes puntuales que no dependen de las custom properties ───── */
/* El logo del sidebar hereda color de link del tema activo (puede quedar
rosa/celeste según el tema) — lo fijamos al color de marca. */
html[data-tutor-theme] .tutor-dashboard-sidebar-logo {
color: var(--brown-dk) !important;
font-weight: 700;
text-decoration: none;
}
/* Logo real del dashboard (isologo subido a Medios: Aesthetic.svg, 637×157,
relación de aspecto ~4.06:1). No tocamos Ajustes > Identidad del sitio a
propósito — así el cambio queda 100% scopeado al dashboard de Tutor y no
se filtra al resto del sitio (header de Elementor, login, etc.).
sidebar.php de Tutor solo pone ahí si hay un logo configurado en el
Customizer; si no, cae a con el nombre del
sitio como texto — es el caso actual, así que reemplazamos ESE span
visualmente por el SVG, sin sacar el texto real del DOM (accesibilidad/
SEO intactos, solo se oculta a la vista).
Reusamos la MISMA caja que Tutor ya calculó para su propio nativo
(.tutor-dashboard-sidebar-logo img, ver tutor-dashboard.min.css: máximo
120px de ancho, ~48px de alto disponible, alineado a la izquierda) para
que quede bien encuadrado. Con aspect-ratio en vez de una altura fija
calculada a mano, si el archivo se reemplaza por otro con proporciones
distintas alcanza con actualizar ese único valor. Al ser SVG se ve nítido
en cualquier tamaño o densidad de pantalla (retina incluido) — no hay
versión "mobile" del logo porque Tutor oculta el sidebar entero (y con
él el logo) por debajo de los 768px, mostrando solo la barra inferior
sin logo; no es algo que dependa de este CSS. */
html[data-tutor-theme] .tutor-dashboard-sidebar-logo .site-title {
display: block;
width: 120px;
max-width: 120px;
aspect-ratio: 637 / 157;
background-image: url('../../../../uploads/2026/07/Aesthetic.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
font-size: 0;
line-height: 0;
color: transparent;
overflow: hidden;
}
/* Radios de tarjeta un poco más suaves, a tono con el resto del sitio */
html[data-tutor-theme] .tutor-dashboard-sidebar {
border-right: 1px solid var(--border);
}
/* Links de "Ver más"/enlaces sueltos que usan el azul de marca por defecto */
html[data-tutor-theme] .tutor-see-all-courses {
color: var(--brown-dk) !important;
}
/* ══════════════════════════════════════════════════════════════
Íconos del menú → Material Symbols (Rounded, 300, sin relleno)
──────────────────────────────────────────────────────────────
Tutor dibuja los íconos del menú como