/**
 * Academia SSDN — shared components
 * ==================================
 * Pieces used on more than one page (index pages, course page). Change
 * them here once. Values come from "Academy - Type & Color Spec.md";
 * tokens come from academy-tokens.css.
 *
 * Page stylesheets (academy-index.css, academy-course.css) only hold what
 * is unique to their page.
 */

:root {
  --hairline: rgba(209, 221, 220, 0.12);     /* spec: border hairline on navy */
  --hover-border: rgba(209, 221, 220, 0.35); /* spec: text disabled value, reused for hover borders */
}

/*
 * The text components below sit on <p>, <h1> and <h2>. The Elementor kit
 * styles those with `.elementor-kit-N p` etc., which beats a single class,
 * so each rule is also scoped under the page wrappers (.ssdn-indice for
 * Cursos / Herramientas, .ssdn-curso for the course page, .ssdn-dashboard
 * for Dashboard).
 */

/* Eyebrow — blue, for counts and data. */
.ssdn-eyebrow,
.ssdn-indice .ssdn-eyebrow,
.ssdn-curso .ssdn-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ssdn-blue);
  margin: 0;
}

/* Page title (H1). */
.ssdn-page-title,
.ssdn-indice .ssdn-page-title,
.ssdn-curso .ssdn-page-title,
.ssdn-dashboard .ssdn-page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--text-1-dark);
  margin: 12px 0 0;
  max-width: 620px;
  text-wrap: pretty;
}

/* Lede under the title. */
.ssdn-lede,
.ssdn-indice .ssdn-lede,
.ssdn-curso .ssdn-lede,
.ssdn-dashboard .ssdn-lede {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2-dark);
  margin: 12px 0 0;
  max-width: 620px;
  text-wrap: pretty;
}

/*
 * Section label — Plex Mono eyebrow over a hairline. An <h2>. On the
 * course page the #mpcs-main form also outranks MemberPress classroom.css
 * (#mpcs-main h2 { font-size: 2rem }).
 */
.ssdn-section-label,
.ssdn-indice .ssdn-section-label,
#mpcs-main.ssdn-curso .ssdn-section-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3-dark);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
  margin: 0 0 22px;
}

/* Progress bar — gold means progress. */
.ssdn-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ssdn-progress__track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--hairline);
  overflow: hidden;
}

.ssdn-progress__fill {
  display: block;
  height: 100%;
  background: var(--ssdn-gold);
}

.ssdn-progress__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  color: var(--text-2-dark);
  font-variant-numeric: tabular-nums;
}

/*
 * Next lesson card — sage (or the course's featured image), label, lesson
 * title, the page's one orange button. Markup:
 * template-parts/components/next-lesson.php. Used by the course page and
 * the dashboard page; the page stylesheet sets the margin above it.
 *
 * Grid areas keep one markup for both layouts:
 *   default     label · actions / text · actions   (course page)
 *   .is-detalle label · progreso / text · actions   (Dashboard: course name,
 *               "3 de 8", description, "Ver el temario")
 *
 * Inside the MemberPress classroom, classroom.css prints after this file,
 * so the title and button carry #mpcs-main forms: `#mpcs-main h2` sets
 * 2rem, and `body.ssdn-classroom .ssdn-btn` / `a:visited` restyle links.
 */
.ssdn-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label actions"
    "text  actions";
  align-content: end;
  height: 280px;
  padding: 26px;
  border-radius: var(--r-panel);
  background-color: var(--ssdn-sage);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Featured image: navy fade at the bottom so the text stays legible. */
.ssdn-next.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ssdn-navy) 0%, transparent 70%);
}

.ssdn-next > * {
  position: relative;
}

.ssdn-next .ssdn-next__label {
  grid-area: label;
  font: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2-sage);
  margin: 0;
}

.ssdn-next .ssdn-next__text {
  grid-area: text;
  min-width: 0;
}

.ssdn-next .ssdn-next__title,
#mpcs-main .ssdn-next .ssdn-next__title {
  font: var(--t-h2);
  letter-spacing: normal;
  color: var(--ssdn-navy);
  margin: 8px 0 0;
  text-wrap: pretty;
}

.ssdn-next .ssdn-next__actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 22px; /* not column-gap: no gap when there are no actions */
}

.ssdn-next .ssdn-next__button,
#mpcs-main .ssdn-next .ssdn-next__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  font: var(--t-button);
  color: var(--ssdn-navy);
}

.ssdn-next .ssdn-next__button:hover,
.ssdn-next .ssdn-next__button:focus,
#mpcs-main .ssdn-next .ssdn-next__button:hover,
#mpcs-main .ssdn-next .ssdn-next__button:focus {
  color: var(--ssdn-navy);
  text-decoration: none;
}

.ssdn-next a:focus-visible {
  outline: 2px solid var(--ssdn-blue);
  outline-offset: 2px;
}

.ssdn-next.has-image .ssdn-next__label {
  color: var(--text-2-dark);
}

.ssdn-next.has-image .ssdn-next__title,
#mpcs-main .ssdn-next.has-image .ssdn-next__title {
  color: var(--text-1-dark);
}

/* Detailed layout (Dashboard) */

.ssdn-next.is-detalle {
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "label progreso"
    "text  actions";
  align-content: stretch;
  padding: 26px 34px 34px;
}

.ssdn-next.is-detalle .ssdn-next__label {
  align-self: center;
}

.ssdn-next.is-detalle .ssdn-next__text {
  align-self: end;
}

.ssdn-next .ssdn-next__progreso {
  grid-area: progreso;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 260px;
  margin-left: 22px;
}

.ssdn-next .ssdn-next__track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(17, 34, 65, 0.12); /* spec: navy track on sage */
  overflow: hidden;
}

/* Navy, not gold: gold on sage is 1.4:1. */
.ssdn-next .ssdn-next__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ssdn-navy);
}

.ssdn-next .ssdn-next__count {
  font: var(--t-num);
  font-variant-numeric: tabular-nums;
  color: var(--ssdn-navy);
  white-space: nowrap;
}

.ssdn-next .ssdn-next__course {
  font: var(--t-ui);
  font-weight: 600;
  color: var(--text-2-sage);
  margin: 0;
}

.ssdn-next.is-detalle .ssdn-next__title,
#mpcs-main .ssdn-next.is-detalle .ssdn-next__title {
  margin-top: 6px;
  max-width: 620px;
  text-wrap: balance;
}

.ssdn-next .ssdn-next__desc {
  font: var(--t-body);
  color: var(--text-2-sage);
  margin: 8px 0 0;
  max-width: 520px;
  text-wrap: pretty;
}

.ssdn-next .ssdn-next__link {
  font: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ssdn-navy);
  text-decoration: underline;
  text-decoration-color: rgba(17, 34, 65, 0.35);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.ssdn-next .ssdn-next__link:hover,
.ssdn-next .ssdn-next__link:focus {
  color: var(--ssdn-navy);
  text-decoration-color: var(--ssdn-navy);
}

.ssdn-next.has-image .ssdn-next__course,
.ssdn-next.has-image .ssdn-next__desc {
  color: var(--text-2-dark);
}

.ssdn-next.has-image .ssdn-next__count,
.ssdn-next.has-image .ssdn-next__link,
.ssdn-next.has-image .ssdn-next__link:hover {
  color: var(--text-1-dark);
}

.ssdn-next.has-image .ssdn-next__link {
  text-decoration-color: var(--hover-border);
}

.ssdn-next.has-image .ssdn-next__track {
  background: var(--hairline);
}

.ssdn-next.has-image .ssdn-next__fill {
  background: var(--ssdn-gold);
}

@media (max-width: 767px) {
  .ssdn-next {
    height: 200px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "text"
      "actions";
  }

  .ssdn-next .ssdn-next__actions {
    margin: 22px 0 0;
  }

  .ssdn-next.is-detalle {
    height: auto;
    min-height: 200px;
    grid-template-rows: none;
    grid-template-areas:
      "label"
      "text"
      "progreso"
      "actions";
    align-content: end;
    padding: 22px;
    border-radius: 18px;
  }

  .ssdn-next.is-detalle .ssdn-next__text {
    margin-top: 34px;
  }

  .ssdn-next .ssdn-next__progreso {
    justify-self: stretch;
    width: auto;
    margin: 16px 0 0;
  }

  .ssdn-next.is-detalle .ssdn-next__title,
  #mpcs-main .ssdn-next.is-detalle .ssdn-next__title {
    font: var(--t-h2-m);
  }

  .ssdn-next .ssdn-next__desc,
  .ssdn-next .ssdn-next__link {
    display: none;
  }

  .ssdn-next.is-detalle .ssdn-next__actions {
    display: block;
    margin-top: 18px;
  }

  .ssdn-next.is-detalle .ssdn-next__button,
  #mpcs-main .ssdn-next.is-detalle .ssdn-next__button {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/*
 * Components added for the dashboard page (2026-09-26). Type comes from the
 * --t-* tokens in academy-tokens.css. The pages sit inside Elementor, whose
 * kit styles `a` and `h2` (.elementor-kit-N a, 0,1,1; a:hover 0,2,1), so
 * every selector here has two classes and every link state three.
 */

/* Icon square — flat category colour. Spec: Shape and spacing. */
.ssdn-icon-sq {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

/* Section heading row — markup: components/section-head.php */
.ssdn-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-dark);
}

.ssdn-section-head .ssdn-section-head__title {
  font: var(--t-h2);
  letter-spacing: normal;
  color: var(--text-1-dark);
  margin: 0;
  text-wrap: balance;
}

.ssdn-section-head .ssdn-section-head__link {
  flex: none;
  font: var(--t-ui);
  font-weight: 600;
  color: var(--ssdn-gold); /* gold = secondary link on dark */
  text-decoration: none;
}

.ssdn-section-head .ssdn-section-head__link:hover,
.ssdn-section-head .ssdn-section-head__link:focus {
  color: var(--ssdn-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ssdn-section-head .ssdn-section-head__short {
  display: none;
}

/* Course row — markup: components/course-row.php */
.ssdn-course-row.ssdn-course-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
}

li:last-child > .ssdn-course-row.ssdn-course-row,
.ssdn-course-row.ssdn-course-row:last-child {
  border-bottom: 0;
}

.ssdn-course-row .ssdn-course-row__body {
  flex: 1;
  min-width: 0;
}

.ssdn-course-row .ssdn-course-row__title {
  display: block;
  font: var(--t-item);
  color: var(--text-1-dark);
  text-wrap: pretty;
}

.ssdn-course-row .ssdn-course-row__meta {
  display: block;
  margin-top: 3px;
  font: var(--t-meta);
  color: var(--text-3-dark);
}

.ssdn-course-row.is-link:hover,
.ssdn-course-row.is-link:focus {
  color: inherit;
  text-decoration: none;
}

.ssdn-course-row.is-link:hover .ssdn-course-row__title {
  text-decoration: underline;
  text-decoration-color: var(--text-3-dark);
  text-underline-offset: 3px;
}

.ssdn-course-row.is-link:focus-visible {
  outline: 2px solid var(--ssdn-blue);
  outline-offset: 2px;
}

/* The shared progress bar, sized for a row; % at the number size. */
.ssdn-course-row .ssdn-progress {
  flex: none;
  width: 120px;
  gap: 10px;
}

.ssdn-course-row .ssdn-progress__label {
  width: 34px;
  font: var(--t-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ssdn-course-row .ssdn-course-row__status {
  flex: none;
  font: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3-dark);
}

.ssdn-course-row .ssdn-course-row__status.is-gold {
  color: var(--ssdn-gold);
}

/* Tool link — markup: components/tool-link.php. Row on desktop, tile on
   phones (see the 767px block below). */
.ssdn-tool-link.ssdn-tool-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
}

.ssdn-tool-link .ssdn-icon-sq {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: translateY(1px);
}

.ssdn-tool-link .ssdn-tool-link__name {
  flex: none;
  font: var(--t-item);
  color: var(--text-1-dark);
}

.ssdn-tool-link .ssdn-tool-link__desc {
  min-width: 0;
  font: var(--t-meta);
  color: var(--text-3-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssdn-tool-link.is-link:hover,
.ssdn-tool-link.is-link:focus {
  color: inherit;
  text-decoration: none;
}

.ssdn-tool-link.is-link:hover .ssdn-tool-link__name {
  text-decoration: underline;
  text-decoration-color: var(--text-3-dark);
  text-underline-offset: 3px;
}

.ssdn-tool-link.is-link:focus-visible {
  outline: 2px solid var(--ssdn-blue);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .ssdn-icon-sq {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .ssdn-section-head {
    padding-bottom: 12px;
  }

  .ssdn-section-head .ssdn-section-head__title {
    font: var(--t-h2-m);
  }

  .ssdn-section-head .ssdn-section-head__full {
    display: none;
  }

  .ssdn-section-head .ssdn-section-head__short {
    display: inline;
  }

  .ssdn-course-row .ssdn-course-row__meta {
    font: var(--t-meta-m);
  }

  .ssdn-course-row .ssdn-progress {
    width: 92px;
  }

  /* Tile */
  .ssdn-tool-link.ssdn-tool-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 108px;
    padding: 14px;
    background: var(--surface-dark);
    border: 1px solid var(--border-dark);
    border-radius: 14px;
    box-sizing: border-box;
  }

  .ssdn-tool-link .ssdn-icon-sq {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    transform: none;
  }

  .ssdn-tool-link .ssdn-tool-link__name {
    margin-top: auto;
    padding-top: 14px;
    font: var(--t-h4);
    text-wrap: balance;
    hyphens: auto;
  }

  .ssdn-tool-link .ssdn-tool-link__desc {
    display: none;
  }
}

/* Price card — white card on navy: badge, price, one orange button,
   checklist. Markup: template-parts/components/price-card.php. Selectors
   carry .ssdn-price-card so they outrank spectre.css and
   academy-classroom.css inside the MemberPress classroom. */
.ssdn-price-card {
  background: #fff;
  color: var(--text-1-light);
  border-radius: var(--r-panel);
  padding: 26px;
  font-family: var(--font-ui);
}

.ssdn-price-card .ssdn-price-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ssdn-price-card .ssdn-price-card__nota {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2-light);
  text-align: right;
}

.ssdn-price-card .ssdn-price-card__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.ssdn-price-card .ssdn-price-card__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-1-light);
}

.ssdn-price-card .ssdn-price-card__sufijo {
  font-size: 14px;
  color: var(--text-2-light);
}

.ssdn-price-card .ssdn-price-card__linea {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2-light);
  margin: 8px 0 0;
  text-wrap: pretty;
}

.ssdn-price-card .ssdn-btn.ssdn-price-card__button {
  display: block;
  margin-top: 22px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ssdn-navy);
}

.ssdn-price-card .ssdn-btn.ssdn-price-card__button:hover,
.ssdn-price-card .ssdn-btn.ssdn-price-card__button:focus {
  color: var(--ssdn-navy);
  text-decoration: none;
}

.ssdn-price-card .ssdn-btn.ssdn-price-card__button:focus-visible {
  outline: 2px solid var(--ssdn-blue);
  outline-offset: 2px;
}

.ssdn-price-card .ssdn-price-card__incluye {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(17, 34, 65, 0.09); /* spec: divider on light */
}

.ssdn-price-card .ssdn-price-card__lista-titulo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3-light);
  margin: 0 0 12px;
}

.ssdn-price-card .ssdn-price-card__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ssdn-price-card .ssdn-price-card__lista li {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-1-light);
  text-wrap: pretty;
}

/* Orange square check, as in the design. */
.ssdn-price-card .ssdn-price-card__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--ssdn-orange);
}

@media (max-width: 767px) {
  .ssdn-price-card {
    padding: 22px;
  }

  .ssdn-price-card .ssdn-price-card__amount {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .ssdn-page-title,
  .ssdn-indice .ssdn-page-title,
  .ssdn-curso .ssdn-page-title,
  .ssdn-dashboard .ssdn-page-title {
    font-size: 25px;
    line-height: 1.2;
  }

  .ssdn-lede,
  .ssdn-indice .ssdn-lede,
  .ssdn-curso .ssdn-lede,
  .ssdn-dashboard .ssdn-lede {
    font-size: 14px;
    line-height: 1.5;
  }
}