/* =========================================================
   FILE: style_ui.css
   VERSION: v2.3.1
   UPDATED: 2026-02-05 America/Mexico_City
   AUTHOR: Steve
   CHANGE: Dedupe + normalización flat + orden (UI + Sidebar + Courses + FullCalendar) + móvil (workspace) + FullCalendar ultra-compact
   ========================================================= */

:root {
  --ui-border: rgba(0, 0, 0, 0.08);
  --ui-border-strong: rgba(0, 0, 0, 0.1);
  --ui-muted: #6b7280;
  --ui-ink: #111827;
  --ui-hover: rgba(17, 24, 39, 0.03);
  --ui-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  --ui-shadow-hover: 0 2px 8px rgba(16, 24, 40, 0.1);

  --ui-mobile-pad: 12px;
  --ui-mobile-radius: 1rem;
  --ui-mobile-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ui-mobile-shadow-hover: 0 2px 8px rgba(16, 24, 40, 0.08);
}

.hide {
  display: none !important;
}

/* =========================
   Base UI
========================= */

.ui-muted {
  color: var(--ui-muted);
}
.ui-title {
  letter-spacing: -0.01em;
}

.ui-divider {
  height: 1px;
  background: var(--ui-border);
  margin: 18px 0;
}

.ui-card {
  border: 1px solid var(--ui-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.ui-card:hover {
  box-shadow: var(--ui-shadow-hover);
}

.ui-statuswrap {
  border: 1px solid var(--ui-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--ui-shadow);
  padding: 14px;
}
.ui-statushead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ui-border-strong);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.85rem;
  color: var(--ui-muted);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.65rem !important;
  border: 1px solid var(--ui-border-strong);
  background: #fff;
  color: var(--ui-muted);
}
.ui-pill-ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
  color: #166534;
}
.ui-pill-no {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
  color: #334155;
}

.ui-actions .btn {
  border-radius: 0.85rem;
}
.ui-tabs .btn {
  border-radius: 999px;
}
.ui-btn {
  border-radius: 0.9rem;
}

.btn-xs {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.2;
  border-radius: 0.85rem;
}

.ui-badge {
  font-size: 0.72rem;
  padding: 0.32rem 0.5rem;
  border-radius: 0.85rem;
}
.ui-tabcount {
  font-size: 0.7rem;
  padding: 0.28rem 0.48rem;
  border-radius: 999px;
}

.ui-rowlink {
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  background: #fff;
  padding: 14px;
  box-shadow: var(--ui-shadow);
}
.ui-rowlink:hover {
  background: var(--ui-hover);
  box-shadow: var(--ui-shadow-hover);
}

.nu,
.nu:hover {
  text-decoration: none;
  color: inherit;
}

.ui-kicker {
  font-size: 0.85rem;
  color: var(--ui-muted);
}

.ui-acc-btn {
  box-shadow: none !important;
}

.ui-exam-item {
  padding-top: 22px;
  padding-bottom: 22px;
}
.ui-exam-divider {
  height: 1px;
  background: var(--ui-border);
  margin: 18px 0;
}

/* =========================
   Steps / Plans / Live
========================= */

.ui-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 992px) {
  .ui-step-grid {
    grid-template-columns: 1fr;
  }
}

.ui-step-pill {
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--ui-shadow);
}
.ui-step-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ui-step-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ui-step-ok {
  color: var(--bs-success);
}
.ui-step-no {
  color: var(--ui-muted);
}
.ui-step-right {
  color: var(--ui-muted);
}

.ui-step {
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  background: #fff;
  padding: 12px;
  box-shadow: var(--ui-shadow);
}
.ui-step:hover {
  box-shadow: var(--ui-shadow-hover);
}
.ui-step a {
  text-decoration: none;
  color: inherit;
}
.ui-step a:hover {
  text-decoration: underline;
}

.ui-plan-row {
  padding: 16px 18px;
}
.ui-plan-row .ui-plan-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ui-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 992px) {
  .ui-live-grid {
    grid-template-columns: 1fr;
  }
}

.ui-live-item {
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  background: #fff;
  padding: 14px;
  box-shadow: var(--ui-shadow);
}
.ui-live-item:hover {
  background: var(--ui-hover);
  box-shadow: var(--ui-shadow-hover);
}
.ui-live-kicker {
  font-size: 0.85rem;
  color: var(--ui-muted);
}
.ui-live-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ui-ink);
}
.ui-live-meta {
  margin-top: 6px;
  color: var(--ui-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================
   Registry / Lists
========================= */

.ui-reglist {
  max-height: 260px;
  overflow: auto;
}
.ui-regitem {
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  background: #fff;
  padding: 12px;
  box-shadow: var(--ui-shadow);
}
.ui-regitem:hover {
  background: var(--ui-hover);
  box-shadow: var(--ui-shadow-hover);
}
.ui-regtitle {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ui-ink);
}
.ui-regmeta {
  font-size: 0.85rem;
  color: var(--ui-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================
   Class Cards
========================= */

.ui-class-card {
  border: 1px solid var(--ui-border);
  border-radius: 1.1rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--ui-shadow);
}
.ui-class-card:hover {
  box-shadow: var(--ui-shadow-hover);
}
.ui-class-meta {
  color: var(--ui-muted);
  font-size: 0.85rem;
}
.ui-class-actions .btn {
  border-radius: 0.85rem;
}

/* =========================
   Sidebar
========================= */

.ui-side-card {
  border: 1px solid var(--ui-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.ui-side-card:hover {
  box-shadow: var(--ui-shadow-hover);
}
.ui-side-divider {
  height: 1px;
  background: var(--ui-border);
  margin: 14px 0;
}
.ui-side-muted {
  color: var(--ui-muted);
}
.ui-side-title {
  letter-spacing: -0.01em;
}

.ui-side-nav .nav-link {
  border-radius: 0.95rem;
  padding: 0.65rem 0.75rem;
  color: var(--ui-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-side-nav .nav-link:hover {
  background: var(--ui-hover);
}
.ui-side-nav .nav-link.active {
  background: rgba(13, 110, 253, 0.08);
  color: #0b5ed7;
  font-weight: 700;
}
.ui-side-nav .nav-link i {
  width: 20px;
  text-align: center;
}

/* =========================
   Courses
========================= */

.ui-course-wrap {
  border: 1px solid var(--ui-border);
  border-radius: 1.1rem;
  background: #fff;
  padding: 18px;
  margin-top: 18px;
  box-shadow: var(--ui-shadow);
}
.ui-course-title a {
  color: inherit;
  text-decoration: none;
}
.ui-course-title a:hover {
  text-decoration: underline;
}

.ui-progress {
  height: 10px;
  border-radius: 0.75rem;
  background: rgba(17, 24, 39, 0.08);
  overflow: hidden;
}
.ui-progress > div {
  height: 100%;
}

.ui-list .list-group-item {
  border-color: var(--ui-border);
}
.ui-list .list-group-item:hover {
  background: var(--ui-hover);
}

.ui-accordion .accordion-item {
  border: 0;
  background: transparent;
}
.ui-accordion .accordion-button {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 1.1rem;
  box-shadow: none;
}
.ui-accordion .accordion-button:not(.collapsed) {
  box-shadow: var(--ui-shadow-hover);
}
.ui-accordion .accordion-body {
  padding: 0;
}

.ui-badges .badge {
  border-radius: 0.85rem;
}

.ui-mini {
  font-size: 0.92rem;
}

.ui-rec {
  border: 1px dashed var(--ui-border-strong);
  border-radius: 1rem;
  padding: 12px;
}
.ui-rec a {
  text-decoration: none;
  color: inherit;
}
.ui-rec a:hover {
  text-decoration: underline;
}

.ui-search .form-control,
.ui-search .btn {
  border-radius: 0.95rem;
}

.ui-recbtn {
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.1;
}
.ui-recbtn i {
  font-size: 0.9rem;
}

.ui-recmeta {
  color: var(--ui-muted);
  font-size: 0.82rem;
}

/* =========================
   FullCalendar (Base)
========================= */

.fc {
  background: transparent;
  padding: 0;
}
.fc .fc-scrollgrid {
  border: 0;
}

.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 0.75rem;
}

.fc .fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fc .fc-toolbar-title {
  font-weight: 600;
  color: var(--bs-secondary);
  text-transform: uppercase !important;
  font-size: large !important;
}

.fc .fc-button {
  border-radius: 0.85rem !important;
}
.fc .fc-button-primary {
  box-shadow: none !important;
}

.fc .fc-button-group {
  gap: 0.35rem;
}
.fc .fc-button-group > .fc-button {
  margin: 0;
}

.fc .fc-list {
  border: 0;
}

.fc .fc-list-day-cushion {
  background: rgba(17, 24, 39, 0.03);
  border-radius: 0.85rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
}

.fc .fc-list-event {
  border-radius: 0.85rem;
  overflow: hidden;
}
.fc .fc-list-event:hover {
  background: rgba(17, 24, 39, 0.03);
}
.fc .fc-list-event-title {
  font-weight: 700;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: rgba(0, 0, 0, 0.06);
}

/* =========================
   Mobile Workspace Helpers
   (para expandir a full-width y controlar padding)
========================= */

@media (max-width: 576px) {
  .ui-mobile-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .ui-mobile-edge {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ui-mobile-edge .ui-card,
  .ui-mobile-edge .ui-class-card,
  .ui-mobile-edge .ui-course-wrap {
    border-radius: 0.9rem;
  }

  .ui-mobile-edge .ui-card {
    padding: 1rem !important;
  }

  .ui-mobile-edge .ui-card.p-4,
  .ui-mobile-edge .ui-card.p-5 {
    padding: 1rem !important;
  }

  .ui-mobile-edge .ui-class-card {
    padding: 1rem;
  }

  .ui-mobile-edge .ui-divider {
    margin: 12px 0;
  }
}

/* =========================================================
   Mobile Boost Pack (UI móvil: densidad, botones, workspace)
   ========================================================= */

@media (max-width: 576px) {
  body {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  .ui-mobile-work {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: var(--ui-mobile-pad) !important;
    padding-right: var(--ui-mobile-pad) !important;
  }

  .ui-mobile-edge {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ui-mobile-edge .ui-mobile-work {
    padding-left: var(--ui-mobile-pad) !important;
    padding-right: var(--ui-mobile-pad) !important;
  }

  .ui-title,
  h1,
  h2,
  h3 {
    letter-spacing: -0.02em;
  }

  .h1,
  .h2,
  .h3,
  h1,
  h2,
  h3 {
    line-height: 1.05;
  }

  .ui-card,
  .ui-statuswrap,
  .ui-course-wrap,
  .ui-class-card,
  .ui-live-item,
  .ui-rowlink,
  .ui-regitem {
    border-radius: var(--ui-mobile-radius) !important;
    box-shadow: var(--ui-mobile-shadow) !important;
  }

  .ui-card {
    padding: 1rem !important;
  }
  .ui-card.p-4,
  .ui-card.p-5 {
    padding: 1rem !important;
  }

  .ui-class-card,
  .ui-course-wrap,
  .ui-live-item,
  .ui-rowlink,
  .ui-regitem {
    padding: 0.95rem !important;
  }

  .ui-divider {
    margin: 12px 0 !important;
  }

  .ui-actions {
    width: 100%;
  }
  .ui-actions .btn {
    border-radius: 999px !important;
    padding: 0.55rem 0.95rem !important;
    font-size: 0.9rem !important;
    line-height: 1.1;
  }

  .btn.btn-sm {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.88rem !important;
    border-radius: 999px !important;
  }

  .btn-group,
  .ui-tabs {
    width: 100%;
  }

  .ui-tabs .btn {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.9rem !important;
  }

  .badge,
  .ui-badge {
    border-radius: 999px !important;
    padding: 0.38rem 0.6rem !important;
    font-size: 0.78rem !important;
  }

  .ui-progress {
    height: 12px;
    border-radius: 999px;
  }

  .ui-live-meta,
  .ui-regmeta {
    gap: 6px !important;
  }

  .ui-step-grid {
    gap: 10px;
  }

  .ui-step-pill {
    padding: 12px 14px;
    border-radius: 999px;
    box-shadow: var(--ui-mobile-shadow) !important;
  }

  .ui-step {
    padding: 0.9rem;
    box-shadow: var(--ui-mobile-shadow) !important;
  }

  .ui-card .ui-card {
    box-shadow: none !important;
  }

  .fc .fc-toolbar-title {
    font-size: 1rem !important;
    letter-spacing: 0.04em;
  }
  .fc .fc-toolbar-chunk {
    gap: 0.4rem;
  }
  .fc .fc-button {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.85rem !important;
    border-radius: 999px !important;
  }
}

/* =========================================================
   FullCalendar — Mobile Compact Mode
   ========================================================= */
@media (max-width: 576px) {
  .fc {
    padding: 8px !important;
    border-radius: 14px;
  }

  .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.4rem;
  }

  .fc .fc-toolbar-title {
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  .fc .fc-toolbar-chunk {
    gap: 0.3rem;
  }

  .fc .fc-button {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.75rem !important;
    line-height: 1;
    border-radius: 999px !important;
  }

  .fc .fc-button-group {
    gap: 0.25rem;
  }

  .fc-theme-standard th,
  .fc-theme-standard td {
    font-size: 0.65rem;
    padding: 2px !important;
  }

  .fc-daygrid-day {
    padding: 2px !important;
  }

  .fc-daygrid-day-frame {
    padding: 4px !important;
    border-radius: 10px;
  }

  .fc-daygrid-day-number {
    font-size: 0.65rem;
    padding: 2px 4px;
  }

  .fc-daygrid-event {
    margin-top: 2px;
    padding: 1px 4px;
    font-size: 0.6rem;
    line-height: 1.1;
    border-radius: 6px;
  }

  .fc-daygrid-event .fc-event-title {
    font-size: 0.6rem;
    font-weight: 600;
  }

  .fc .fc-list-day-cushion {
    padding: 0.4rem 0.5rem;
    margin-top: 0.4rem;
    border-radius: 10px;
    font-size: 0.65rem;
  }

  .fc .fc-list-event {
    padding: 0.35rem 0.45rem;
    font-size: 0.65rem;
  }

  .fc .fc-list-event-title {
    font-size: 0.65rem;
    font-weight: 600;
  }

  .fc .fc-list-event-time {
    font-size: 0.6rem;
  }

  .fc-scrollgrid-section-body table {
    border-spacing: 3px 3px !important;
    border-collapse: separate !important;
  }
}

/* =========================================================
   FullCalendar — Mobile ULTRA Compact (override final)
   ========================================================= */
@media (max-width: 576px) {
  .fc {
    padding: 6px !important;
    border-radius: 12px !important;
  }

  .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.25rem !important;
  }

  .fc .fc-toolbar-title {
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }

  .fc .fc-toolbar-chunk {
    gap: 0.22rem !important;
  }

  .fc .fc-button {
    padding: 0.28rem 0.5rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .fc .fc-button-group {
    gap: 0.18rem !important;
  }

  .fc-theme-standard th {
    font-size: 0.6rem !important;
    padding: 2px !important;
  }

  .fc-theme-standard td {
    font-size: 0.6rem !important;
    padding: 1px !important;
  }

  .fc .fc-daygrid-day {
    padding: 1px !important;
  }

  .fc .fc-daygrid-day-frame {
    padding: 2px !important;
    border-radius: 9px !important;
    min-height: 44px !important;
  }

  .fc .fc-daygrid-day-top {
    margin-bottom: 1px !important;
  }

  .fc .fc-daygrid-day-number {
    font-size: 0.58rem !important;
    padding: 1px 3px !important;
    line-height: 1 !important;
  }

  .fc .fc-daygrid-event {
    margin-top: 1px !important;
    padding: 0 3px !important;
    font-size: 0.56rem !important;
    line-height: 1.05 !important;
    border-radius: 6px !important;
  }

  .fc .fc-daygrid-event .fc-event-title {
    font-size: 0.56rem !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
  }

  .fc .fc-daygrid-event .fc-event-time {
    font-size: 0.54rem !important;
  }

  .fc .fc-list-day-cushion {
    padding: 0.28rem 0.4rem !important;
    margin-top: 0.25rem !important;
    border-radius: 9px !important;
    font-size: 0.6rem !important;
  }

  .fc .fc-list-event {
    padding: 0.22rem 0.35rem !important;
    font-size: 0.6rem !important;
  }

  .fc .fc-list-event-title {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
  }

  .fc .fc-list-event-time {
    font-size: 0.56rem !important;
  }

  .fc-scrollgrid-section-body table {
    border-spacing: 2px 2px !important;
    border-collapse: separate !important;
  }

  .fc .fc-list-table td {
    padding: 6px 6px !important;
  }
}

@media (max-width: 360px) {
  .fc {
    padding: 5px !important;
  }
  .fc .fc-toolbar-title {
    font-size: 0.74rem !important;
  }
  .fc .fc-button {
    padding: 0.26rem 0.46rem !important;
    font-size: 0.68rem !important;
  }
}

.ui-owned {
  border-color: rgba(25, 135, 84, 0.25);
}
.ui-plan-cover {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #f8fafc;
  height: 180px;
}
.ui-plan-cover .cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.ui-courses {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 14px;
  padding-top: 14px;
}
.ui-course-item {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  background: #fff;
  padding: 14px;
}
.ui-course-item:hover {
  background: rgba(17, 24, 39, 0.02);
}
.ui-course-meta {
  color: #6b7280;
  font-size: 0.9rem;
}