/* @import al inicio. ORDEN IMPORTANTE: themify y Tabler comparten clases .ti-* -> colisionan. Se importa themify PRIMERO (para los íconos legacy solo-themify: ti-email/ti-time/ti-angle-up…) y tabler-icons DESPUÉS (re-import) para que Tabler GANE las colisiones (ti-shopping-cart, ti-search, ti-user…) — si no, themify pisaba los íconos Tabler del navbar/cards y salían vacíos. + FontAwesome (botón de carrito fa-cart-plus/fa-shopping-cart que togglea el JS). */ @import url("/shared_assets/assets2/icons/css/themify-icons.css"); @import url("/shared_assets/icons/tabler-icons.min.css"); @import url("/shared_assets/icons/tabler-icons-filled.css"); @import url("/shared_assets/plugins/fontawesome-free-5.15.3/css/all.min.css"); /* Íconos legacy de UN solo prefijo (.ti-NAME sin la clase base .ti) cuyo nombre TAMBIÉN existe en Tabler: como re-importamos tabler-icons al final, el content de Tabler gana, pero la fuente la pone themify -> glyph vacío. Forzamos la fuente Tabler en esos (los solo-themify NO están aquí, conservan su fuente). */ .ti-user:not(.ti), .ti-file:not(.ti), .ti-search:not(.ti), .ti-eraser:not(.ti), .ti-cup:not(.ti), .ti-book:not(.ti), .ti-lock:not(.ti), .ti-world:not(.ti), .ti-bag:not(.ti), .ti-star:not(.ti), .ti-clock:not(.ti), .ti-calendar:not(.ti), .ti-thumb-up:not(.ti), .ti-package:not(.ti), .ti-message:not(.ti), .ti-heart:not(.ti), .ti-mail:not(.ti), .ti-pencil:not(.ti), .ti-target:not(.ti), .ti-medal:not(.ti), .ti-coins:not(.ti), .ti-bell:not(.ti), .ti-key:not(.ti), .ti-check:not(.ti), .ti-id:not(.ti), .ti-tag:not(.ti), .ti-clipboard:not(.ti), .ti-trophy:not(.ti){ font-family:"tabler-icons" !important; } /* ===== Eniversy — estilos del sitio público (BS5/Tabler). PBI-LEA-ENIVERSY-HOME-REDISENO-001 --eniv = $color_primario por dominio (se inyecta inline en el de cada página). ===== */ .btn-eniv{ background:var(--eniv); border-color:var(--eniv); color:#fff; } .btn-eniv:hover,.btn-eniv:focus{ background:var(--eniv-dark); border-color:var(--eniv-dark); color:#fff; } .text-eniv{ color:var(--eniv)!important; } .bg-eniv{ background:var(--eniv)!important; color:#fff; } .bg-eniv-soft{ background:var(--eniv-soft); } .navbar-eniv{ box-shadow:0 1px 0 rgba(0,0,0,.06); } .navbar-eniv .nav-link{ color:#33415c; } .navbar-eniv .nav-link:hover,.navbar-eniv .nav-link.show{ color:var(--eniv); } .badge-cart{ background:var(--amber,#f59f00); color:#fff; } .hero{ background:linear-gradient(135deg,var(--eniv) 0%,var(--eniv-dark) 100%); color:#fff; } .stat b{ font-size:1.9rem; line-height:1; } .cat-tile{ transition:.15s; cursor:pointer; border:1px solid var(--tblr-border-color,#e6e7e9); } .cat-tile:hover{ transform:translateY(-3px); border-color:var(--eniv); box-shadow:0 .5rem 1rem rgba(0,0,0,.10); } .cat-ico{ width:52px;height:52px;border-radius:12px;background:var(--eniv-soft);color:var(--eniv);display:flex;align-items:center;justify-content:center; } .course-card{ transition:.15s; overflow:hidden; position:relative; } .course-card:hover{ transform:translateY(-4px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.10); } .course-thumb{ height:150px; background:linear-gradient(135deg,var(--eniv) 0%,#3e6fd6 100%); display:flex;align-items:center;justify-content:center;color:#fff; } .badge-flag{ position:absolute; top:10px; left:10px; z-index:2; } .price-old{ text-decoration:line-through; color:#9aa1ab; font-size:.85rem; } .plan-pop{ border:2px solid var(--eniv); position:relative; } .plan-pop .ribbon{ position:absolute;top:14px;right:-1px;background:var(--eniv);color:#fff;font-size:.72rem;padding:.2rem .7rem;border-radius:6px 0 0 6px; } .cta-band{ background:linear-gradient(135deg,var(--eniv) 0%,var(--eniv-dark) 100%); color:#fff; } .star{ color:#ffb400; } .avatar-i{ width:44px;height:44px;border-radius:50%;background:var(--eniv);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600; } .guarantee{ border:1px dashed var(--eniv); border-radius:12px; } /* footer */ .foot-eniv{ background:#16213e; color:#cfd6e6; } .foot-eniv a{ color:#cfd6e6; text-decoration:none; } .foot-eniv a:hover{ color:#fff; } /* botón volver-arriba (conserva .scroll-top del legacy) */ .scroll-top{ position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; background:var(--eniv); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:1040; box-shadow:0 .25rem .75rem rgba(0,0,0,.2); } .scroll-top.show{ display:flex; } .scroll-top i{ font-size:1.3rem; } /* imágenes de carátula no se desbordan */ .course-card img, .card-body img:not(.avatar):not([class*="rounded-circle"]){ max-width:100%; height:auto; } /* ===== Fallback: owl-carousel (plugin Veltrix retirado) -> grid flex responsivo. Convierte TODAS las secciones de catálogo inferiores en cuadrícula de tarjetas sin tocar su PHP/markup/JS. ===== */ .owl-carousel{ display:flex !important; flex-wrap:wrap; gap:1.5rem; justify-content:center; } .owl-carousel > *{ flex:1 1 280px; max-width:330px; min-width:260px; } .owl-carousel > .card{ margin:0 !important; } /* tarjetas legacy (no .course-card) dentro de catálogos: aspecto Tabler decente */ .owl-carousel .card{ border:1px solid var(--tblr-border-color,#e6e7e9); border-radius:.5rem; transition:.15s; } .owl-carousel .card:hover{ transform:translateY(-3px); box-shadow:0 .5rem 1rem rgba(0,0,0,.10); } .owl-carousel .card img.rounded{ width:100%; max-width:100% !important; height:170px; object-fit:cover; } .owl-carousel .card .media.border-top{ padding:1rem !important; } /* ribbon legacy */ .ribbon-badge{ display:inline-block; padding:.15rem .6rem; border-radius:0 0 .4rem 0; font-size:.72rem; position:absolute; top:0; left:0; z-index:2; } /* botón de carrito legacy (.iconbox) que conserva FontAwesome */ .iconbox-sm{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; } .puntero{ cursor:pointer; } /* ===== Fix legacy sky-form (Veltrix): el card-header mete intro + el formulario como hijos; el flex de Tabler (.card-header{display:flex}) los apila en columnas estrechas (texto 1 palabra por línea). Scoped a .sky-form para NO afectar las course cards. ===== */ .card:has(.sky-form){ display:block; } .card:has(.sky-form) .card-header, .card-header:has(.sky-form){ display:block !important; } .sky-form .row{ display:flex; flex-wrap:wrap; } .sky-form section.col, .sky-form .col, .sky-form .col-12{ flex:0 0 100%; max-width:100%; } .sky-form label.input{ display:block; width:100%; } .sky-form .ocul, .card-header .headline{ width:100%; } /* ===== Shims BS4->BS5 + Veltrix para formularios legacy (pagar, carrito, login, suscribirse…) ===== */ /* input-group-prepend/append: removidos en BS5; display:contents -> sus hijos (input-group-text/btn) pasan a ser items directos del .input-group y el layout flex no se rompe. */ .input-group-prepend, .input-group-append{ display:contents; } /* span.input-group-text que ES un ícono themify (ti-email/ti-lock como clase): que pinte el glyph */ .input-group-text[class*="ti-"]{ font-family:"themify"; } /* ec-checkbox (Veltrix): sin su CSS el control custom es invisible y oculta el checkbox nativo -> mostrar el nativo. */ .ec-checkbox{ display:inline-flex; align-items:center; gap:.35rem; position:relative; padding-left:0; } .ec-checkbox input[type=checkbox]{ position:static; opacity:1; width:1rem; height:1rem; margin:0; } .ec-checkbox .ec-checkbox__control{ display:none; } /* input-group--focus es solo un wrapper Veltrix (ya trae .input-group) — sin estilo extra necesario */ /* botón Veltrix .btn-facebook -> azul Facebook */ .btn-facebook{ background:#1877f2; border-color:#1877f2; color:#fff; } .btn-facebook:hover{ background:#0f5ec9; color:#fff; }