/* ============================================================ Sara & Dánae · marca dentro de Tutor LMS ============================================================ Tutor 4 pinta su panel con VARIABLES CSS (--tutor-brand-*, tipografía). Se sobreescriben aquí, sin tocar un solo archivo del plugin: así el panel se ve de la marca y NO se rompe cuando Tutor se actualice. El panel de Tutor NO usa el header.php del tema: pinta su propio . Por eso la marca tiene que entrar por variables, no por plantilla. ============================================================ */ :root, [data-tutor-ui], .tutor-dashboard, .tutor-wrap { /* Rampa de teal derivada de #0F8B8D, en el mismo orden que la de Tutor */ --tutor-brand-50: #EFF8F8; --tutor-brand-100: #E7F2F2; --tutor-brand-200: #C7E4E4; --tutor-brand-300: #9DD1D2; --tutor-brand-400: #5FB5B7; --tutor-brand-500: #2A9A9C; --tutor-brand-600: #0F8B8D; --tutor-brand-700: #0B6F71; --tutor-brand-800: #0A5B5C; --tutor-brand-900: #084849; --tutor-brand-950: #052E2F; /* Tipografía de la marca */ --tutor-font-family-body: 'Albert Sans', system-ui, sans-serif; --tutor-font-family-heading: 'Albert Sans', system-ui, sans-serif; /* Botones tipo píldora, como en el prototipo */ --tutor-button-radius: 52px; } /* La fuente, por si alguna regla la fija a mano */ .tutor-dashboard, .tutor-wrap, [data-tutor-ui] { font-family: 'Albert Sans', system-ui, sans-serif; } /* El nombre del sitio en la barra lateral, con el logo manuscrito de la marca */ .tutor-dashboard-sidebar .tutor-site-name, .tutor-dashboard-header .tutor-site-name { font-family: 'Great Vibes', cursive; color: #CC3366; font-size: 1.6rem; } /* ── Lo nuestro dentro del panel de la alumna ──────────────────────────── Tutor 4 trae su propio panel y no se reescribe; esto se le cuelga arriba por el hook `tutor_before_dashboard_content`. */ .sd-panel-alumna { display: grid; gap: 1rem; margin: 0 0 1.5rem; font-family: 'Albert Sans', system-ui, sans-serif; } /* `align-items:start` o las dos cajas se estiran a la altura de la más alta y la de acceso queda con un hueco abajo. */ @media (min-width: 900px) { .sd-panel-alumna { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start; } } .sd-pa-caja { border: 1px solid var(--sd-line, #EFE7DA); border-radius: 18px; padding: 1.15rem 1.3rem; background: #fff; } .sd-pa-caja--acceso { background: linear-gradient(180deg, #FFF9F1 0%, #FFFFFF 70%); } .sd-pa-caja--ayuda { background: var(--sd-cream, #F8EFE3); border-color: transparent; } .sd-pa-caja--vacia { text-align: left; } .sd-pa-titulo { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-gold, #B98A54); font-weight: 700; margin: 0 0 .7rem; } .sd-pa-texto { font-size: .9rem; color: var(--sd-brown, #6E6A63); margin: 0 0 .9rem; line-height: 1.5; } .sd-pa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .sd-pa-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; } .sd-pa-lista a { font-weight: 700; color: var(--sd-ink, #181818); text-decoration: none; font-size: 1rem; } .sd-pa-lista a:hover { color: var(--sd-rose, #CC3366); } .sd-pa-fecha { font-size: .82rem; color: var(--sd-muted, #8A857C); } /* A menos de un mes, la fecha deja de ser un dato y se vuelve un aviso. */ .sd-pa-fecha.es-pronto { color: var(--sd-rose, #CC3366); font-weight: 700; } .sd-pa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--sd-teal, #0F8B8D); color: #fff; text-decoration: none; border-radius: 52px; padding: .6rem 1.2rem; font-weight: 700; font-size: .9rem; } .sd-pa-btn:hover { background: #0c7476; color: #fff; } .sd-pa-btn--linea { background: #fff; color: var(--sd-teal, #0F8B8D); border: 1.5px solid var(--sd-teal, #0F8B8D); } .sd-pa-btn--linea:hover { background: var(--sd-teal, #0F8B8D); color: #fff; } /* ── El costado del panel: crema, no gris de fábrica ─────────────────────── */ .tutor-dashboard-sidebar { background: var(--sd-cream, #F8EFE3) !important; border-right: 1px solid #EFE1CE !important; } /* El logo respira y no se estira: el archivo es más ancho que alto. */ .tutor-dashboard-sidebar-logo { display: flex !important; align-items: center; justify-content: flex-start; padding: 1.35rem 1.25rem 1.1rem !important; border-bottom: 1px solid rgba(24,24,24,.07); } .tutor-dashboard-sidebar-logo img { max-height: 40px; width: auto; height: auto; max-width: 82%; } /* Si algún día no hay logo, el nombre al menos va con la tipografía de marca. */ .tutor-dashboard-sidebar-logo .site-title { font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 700; color: var(--sd-ink, #181818); font-size: 1rem; } /* Los renglones del menú, sobre crema */ .tutor-dashboard-sidebar-nav { padding-top: .6rem; } .tutor-dashboard-sidebar-nav a { border-radius: 12px !important; margin: 0 .6rem; color: var(--sd-ink, #181818) !important; font-weight: 500; } .tutor-dashboard-sidebar-nav a:hover { background: rgba(255,255,255,.75) !important; color: var(--sd-teal, #0F8B8D) !important; } /* El activo: blanco sólido, que es lo que resalta sobre crema (el teal claro de fábrica se pierde encima del beige). */ .tutor-dashboard-sidebar-nav a.active, .tutor-dashboard-sidebar-nav li.active > a { background: #fff !important; color: var(--sd-teal, #0F8B8D) !important; font-weight: 700; box-shadow: 0 1px 2px rgba(24,24,24,.05), 0 8px 20px -14px rgba(24,24,24,.5); } .tutor-dashboard-sidebar-nav a.active svg, .tutor-dashboard-sidebar-nav li.active > a svg { color: var(--sd-teal, #0F8B8D) !important; }