/* ========================================================= 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 (match your badges) */ .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; } /* Keep badges crisp even if theme adds filters */ .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); } /* ========================= 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; } /* ========================= 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); } /* ===== 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; } }