/* eniversy-unificado.css — PBI-EMP-MODULOS-ESTANDAR-001 * * Las vistas del empleado de Learning (my_virtual_classroom, my_grades_per_course, * my_queries, my_favorite_classes, my_certificates) usan clases del tema legacy * "Eniversy" (shadow-v1/v2, bg-light-v2, marginTop-30, txts1, etc.) que viven en * assets2/css/style_horizontal.css — un archivo de ~12,000 líneas con RESETS GLOBALES * (body/.card/.btn/a) que PISARÍAN Tabler/BS5 y romperían el shell del empleado. * * Por eso NO se carga ese archivo. Aquí se EXTRAEN fielmente (Regla #1) SOLO las * clases utilitarias que las vistas necesitan — sin ningún reset global — para que * dejen de verse planas. Definiciones copiadas 1:1 de style_horizontal.css salvo * `.txts1` (ver nota). */ /* Los íconos Tabler del shell/topbar vs el atrapa-todo de Themify (icons.css) se arreglan * AHORA en el guard COMPARTIDO shared_assets/css/emp-icon-guard.css, que el shell/topbar * linkean en TODOS los módulos (no solo learning). Aquí ya no se duplica. PBI-EMP-ICONOS-THEMIFY-001. */ /* .list-card — tarjeta de CURSO (la pinta admin_usuarios.js: codigo_curso_general/interno). * Es la clase que da el FONDO BLANCO + flex + bordes a cada curso. Sin ella las tarjetas * de curso salían "sin fondo, todo feo". Extraída 1:1 de style_horizontal.css. */ .list-card { display: flex; flex-wrap: wrap; border-radius: 0.25rem; overflow: hidden; background: #fff; } /* Botón favorito (estrella) de la tarjeta de curso — extraído de style_horizontal.css */ .btn-opacity-primary { background: rgba(0, 203, 84, 0.15); color: #00CB54; } .btn-opacity-primary-selected { background: #00CB54; color: #fff; cursor: pointer; } .btn.iconbox { padding: 3px !important; } /* Utilidades de espaciado/fondo/sombra (extraídas 1:1 de style_horizontal.css) */ .bg-light-v2 { background-color: #f1f3f7 !important; } .marginTop-30 { margin-top: 1.875rem !important; } .paddingTop-10 { padding-top: 0.625rem !important; } .paddingBottom-50{ padding-bottom: 3.125rem !important; } .shadow-v1 { box-shadow: 0 5px 5px 0 rgba(176, 177, 193, 0.1); } .shadow-v2 { box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.06); } .site-header { font-size: 14px; } .bg-black-0_1 { background: rgba(0, 0, 0, 0.1) !important; } .text-white-0_5 { color: rgba(255, 255, 255, 0.5) !important; } .font-size-14 { font-size: 0.875rem !important; } /* .txts1 — chips de filtro de cursos (Todos / No iniciados / En proceso / …). * En el legacy SOLO existía `.txts1:hover`; los chips inactivos eran `.badge` SIN * color de fondo -> invisibles (blanco sobre blanco). El JS (admin_usuarios.js) * marca el activo agregando `text-bg-primary`. Aquí se restaura el look de "pill de * filtro clickable" para los inactivos, conservando ese toggle (solo CSS, sin tocar * la lógica del JS). */ .txts1 { cursor: pointer; background-color: var(--tblr-bg-surface-secondary, #f1f3f7); color: var(--tblr-secondary, #667382); border: 1px solid var(--tblr-border-color, #e6e7e9); transition: background-color .15s ease, color .15s ease; } .txts1:hover { background-color: var(--tblr-primary-lt, #e8f0fb); color: var(--tblr-primary, #206bc4); } .txts1.text-bg-primary { background-color: var(--tblr-primary, #206bc4) !important; color: #fff !important; border-color: var(--tblr-primary, #206bc4); } /* ============================================================ * §16 — Apilado de tablas en movil para TODO el portal del alumno (homogeneo). * Las tablas de datos usan .card-table (Tabler); en movil se aprietan. El helper * vorecol-table-stack.js (cargado en footer_usuarios) agrega data-label por * leyendo el ; aqui replicamos la regla §16 de custom.css (.table-responsive-stack) * targeteando .card-table -> cada fila = tarjeta etiqueta:valor. Solo afecta learning * (este css solo se carga en el portal del alumno). Cero cambios de markup/JS. * ============================================================ */ @media (max-width: 767.98px) { .card-table, .card-table tbody, .card-table tbody tr, .card-table tbody td { display: block !important; width: 100% !important; /* anula alturas inline (ej. style="height:40px" en filas que el JS arma) que en * desktop estan bien pero en movil aprietan/enciman el contenido apilado. */ height: auto !important; min-height: 0 !important; } .card-table thead { display: none !important; } .card-table tbody tr { margin-bottom: 0.75rem; padding: 0.75rem; border: 1px solid var(--tblr-border-color, rgba(0,0,0,0.08)); border-radius: 0.5rem; background: var(--tblr-card-bg, #fff); } .card-table tbody tr.xym, .card-table tbody tr.xym td { display: block !important; padding: 0; border: none; margin-bottom: 0; background: transparent; text-align: center; } .card-table tbody tr.xym td::before { content: none; } .card-table tbody td { display: block !important; padding: 0.25rem 0 !important; border: none !important; text-align: left !important; } .card-table tbody td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--tblr-secondary, #6c757d); font-size: 0.75rem; margin-bottom: 0.125rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; } .card-table tbody td:not([data-label])::before { content: none; } } /* Shims Veltrix adicionales usados por el portal del alumno */ .bg-black-0_9 { background: rgba(0, 0, 0, 0.9) !important; } .font-size-10 { font-size: 0.625rem !important; } .font-size-12 { font-size: 0.75rem !important; } .font-size-15 { font-size: 0.9375rem !important; } .font-size-16 { font-size: 1rem !important; } /* Acota imagenes que el JS inyecta sin clase ni width (caratulas de curso, foto instructor, * imagen de carrito/certificado): sin un max-width salen a su tamano natural y desbordan su * columna/tabla. BS5/Tabler NO ponen img{max-width:100%} global (solo .img-fluid), y el legacy * style_horizontal.css que lo daba ya no se carga. Reset estandar, scoped al portal del alumno. */ .card-body img:not(.avatar):not([class*="rounded-circle"]):not(.emoji), .list-card img, #tab-cuentas img, table.card-table img { max-width: 100%; height: auto; }