/* ========================================================= local_coursecards - category cards (Academi) ========================================================= */ /* ========================================================= Anti-flash (LO PRIMERO): ocultar listado clásico en categoría En cuanto tenga .coursecards-js (añadido por JS en init) ========================================================= */ #page-course-index-category.coursecards-js .course_category_tree .courses, #page-course-index-category.coursecards-js .course_category_tree .courseboxes, #page-course-index-category.coursecards-js .course_category_tree .coursebox{ display:none !important; } /* Hide original listing (coursebox) when plugin is active (refuerzo) */ .coursecards-active .course_category_tree .courses, .coursecards-active .course_category_tree .courseboxes, .coursecards-active .course_category_tree .coursebox{ display:none !important; } .local-coursecards-wrap { margin-top: 1rem; } /* ========================= Filter bar (colored) ========================= */ .local-coursecards-filter{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:0 0 1rem 0; } .local-coursecards-filter button{ background:#fff !important; border:2px solid rgba(0,0,0,.12) !important; padding:.55rem .95rem; border-radius:999px; cursor:pointer; font-weight:800; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.08); opacity:1; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } /* Colors per filter */ .local-coursecards-filter button[data-filter="all"]{ background:#ff00c8 !important; color:#fff !important; border-color:#ff00c8 !important; } .local-coursecards-filter button[data-filter="upcoming"]{ color:#0d99ff !important; border-color:#0d99ff !important; } .local-coursecards-filter button[data-filter="inprogress"]{ color:#f5a623 !important; border-color:#f5a623 !important; } .local-coursecards-filter button[data-filter="finished"]{ color:#9C2E17 !important; border-color:#9C2E17 !important; } .local-coursecards-filter button[data-filter="enrolled"]{ color:#000 !important; border-color:#000 !important; } .local-coursecards-filter button:hover{ transform: translateY(-1px); filter: brightness(.95); box-shadow:0 4px 14px rgba(0,0,0,.14); } .local-coursecards-filter button.active{ outline: 3px solid rgba(0,0,0,.12); box-shadow:0 6px 18px rgba(0,0,0,.16); } /* Fill active buttons (except "all") */ .local-coursecards-filter button.active:not([data-filter="all"]){ color:#fff !important; } .local-coursecards-filter button.active[data-filter="upcoming"]{ background:#0d99ff !important; } .local-coursecards-filter button.active[data-filter="inprogress"]{ background:#f5a623 !important; } .local-coursecards-filter button.active[data-filter="finished"]{ background:#9C2E17 !important; } .local-coursecards-filter button.active[data-filter="enrolled"]{ background:#000 !important; } /* ========================= Grid + Card ========================= */ .local-coursecards-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; } .local-coursecard{ border: 1px solid rgba(0,0,0,.10); border-radius: 16px; overflow: hidden; background:#fff; box-shadow: 0 8px 22px rgba(0,0,0,.07); display:flex; flex-direction:column; } .local-coursecard .img{ width:100%; height: 200px; background-size: contain; background-position:center; background-repeat:no-repeat; background-color: rgba(0,0,0,.03); cursor: zoom-in; } .local-coursecard .body{ padding:.95rem 1rem 1rem; display:flex; flex-direction:column; gap:.6rem; } .local-coursecard .title a{ font-size:1.05rem; font-weight:900; text-decoration:none; } .local-coursecard .title a:hover{ text-decoration:underline; } .local-coursecard .badges{ display:flex; flex-wrap:wrap; gap:.4rem; } /* Base común de etiquetas */ .local-coursecard .course-status-badge{ display:inline-block !important; padding:.28rem .62rem !important; border-radius:999px !important; font-size:.85rem !important; font-weight:800 !important; opacity:1 !important; filter:none !important; text-shadow:none !important; mix-blend-mode:normal !important; border: 1px solid rgba(0,0,0,.08); color:#fff; } /* Estados */ .local-coursecard .course-status-badge.badge-upcoming{ background:#0d99ff !important; color:#fff !important; } .local-coursecard .course-status-badge.badge-inprogress{ background:#f5a623 !important; color:#fff !important; } .local-coursecard .course-status-badge.badge-finished{ background:#9C2E17 !important; color:#fff !important; } .local-coursecard .course-status-badge.badge-enrolled{ background:#000 !important; color:#fff !important; } /* Etiqueta original para cursos ocultos visibles por gestor/admin */ .local-coursecard .course-status-badge.badge-hidden{ background:#00899a !important; color:#fff !important; } /* Curso oculto visible para gestor/admin */ .local-coursecard.lcc-hidden-course{ opacity: 0.92; } /* ========================= Meta info (label/value) ========================= */ .local-coursecard .meta{ display:flex; flex-direction:column; gap:.35rem; font-size: .86rem !important; } .local-coursecard .meta .lcc-row{ display:flex !important; gap: .20rem !important; align-items:baseline !important; flex-wrap:nowrap !important; } /* Label bold, value normal */ .local-coursecard .meta .label{ font-weight: 800 !important; opacity:.85; white-space:nowrap !important; } .local-coursecard .meta .value{ font-weight: 400 !important; opacity:.95; white-space:normal !important; } /* Guide link */ .local-coursecard .actions a{ color:#ff00c8 !important; font-weight:700; text-decoration:none; } .local-coursecard .actions a:hover{ text-decoration:underline; } .local-coursecard .lcc-extra-info { margin-top: 4px; font-size: 0.78rem; font-weight: 800; color: #ff0000; line-height: 1.2; text-transform: uppercase; } /* ========================= Lightbox ========================= */ #lcc-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index: 99999; } #lcc-lightbox.is-visible{ display:flex; } #lcc-lightbox .lcc-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); } #lcc-lightbox .lcc-content{ position:relative; z-index:1; max-width: 92%; max-height: 92%; } #lcc-lightbox img{ display:block; max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 0 22px rgba(0,0,0,.55); background:#fff; } #lcc-lightbox .lcc-close{ position:absolute; top:-12px; right:-12px; width:34px; height:34px; border:none; border-radius:50%; background:#fff; color:#111; font-size:22px; line-height:1; cursor:pointer; box-shadow: 0 0 12px rgba(0,0,0,.45); } /* ========================= Pagination ========================= */ .local-coursecards-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 24px 0 10px; } .local-coursecards-pagination .lcc-page-btn { border: 1px solid #e5e7eb; background: #ffffff; color: #111827; border-radius: 999px; padding: 7px 13px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all .15s ease; } .local-coursecards-pagination .lcc-page-btn:hover:not(:disabled) { background: #f3f4f6; transform: translateY(-1px); } .local-coursecards-pagination .lcc-page-btn.active { background: #ff19fa; border-color: #ff19fa; color: #ffffff; } .local-coursecards-pagination .lcc-page-btn:disabled { opacity: .45; cursor: not-allowed; } /* ===== Layout: 3 cards per row on desktop ===== */ @media (min-width: 992px){ .local-coursecards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 768px) and (max-width: 991px){ .local-coursecards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ====================================================== PAGINACIÓN CURSOS - MÓVIL ====================================================== */ @media (max-width: 768px) { .local-coursecards-pagination { gap: 5px; margin: 18px 0 8px; padding: 0 8px; } .local-coursecards-pagination .lcc-page-btn { padding: 6px 10px; font-size: 0.82rem; min-width: 36px; } .local-coursecards-pagination .lcc-page-btn:first-child, .local-coursecards-pagination .lcc-page-btn:last-child { flex: 1 1 100%; max-width: 220px; margin: 2px auto; } } /* Móvil muy estrecho */ @media (max-width: 420px) { .local-coursecards-pagination { justify-content: center; gap: 4px; } .local-coursecards-pagination .lcc-page-btn { padding: 6px 9px; font-size: 0.78rem; min-width: 32px; } .local-coursecards-pagination .lcc-page-btn:first-child, .local-coursecards-pagination .lcc-page-btn:last-child { width: 100%; max-width: 180px; } }