/* Estilos compartidos por el catálogo público y la administración de cursos. */

@layer features {
.courses__main {
  min-height: 100vh;
  padding: 8rem 2rem 4rem;
  background-color: var(--color-background);
}

.courses__container {
  max-width: 900px;
  margin: 0 auto;
}

.courses__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.courses__eyebrow {
  margin-bottom: 0.75rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.courses__title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 0.5rem;
  background: var(--gradient-heading);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.courses__intro {
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.courses--catalog .courses__main {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 34rem),
    var(--color-background);
}

.courses--catalog .courses__container {
  max-width: 1040px;
}

.courses--catalog .courses__header {
  margin-bottom: 3.5rem;
}

.courses--catalog .courses__title {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.courses--catalog .courses__intro {
  max-width: 680px;
}

/*
  En el catálogo vive dentro de .courses__header y su margen inferior colapsa con
  el de 2.5rem del header. En la cuadrícula admin es hermano directo de la lista,
  así que ese margen es lo único que la separa de las tarjetas.
*/
.courses__header-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.courses__header-actions[hidden],
.courses__data-status[hidden] {
  display: none;
}

.courses__data-status {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: var(--border-subtle);
  border-radius: var(--radius-field);
}

.courses__data-status--error {
  border-color: color-mix(in srgb, var(--color-error) 38%, transparent);
}

.courses__data-status-message {
  color: var(--color-text-muted);
  line-height: 1.5;
}

.courses__data-status--error .courses__data-status-message {
  color: var(--color-error);
}

/* Panel de alta/edición de editar-curso.html (página admin-gated). */
.courses__admin-panel {
  margin-bottom: 3rem;
}

.courses__subtitle {
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
  color: var(--color-text);
}

.courses__form {
  display: grid;
  gap: 1rem;
}

.courses__form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1rem;
}

.courses__form-row > * {
  min-width: 0;
}

.courses__field-group {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.courses__field-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/*
  auto-fill y no auto-fit: auto-fit colapsa las columnas vacías, así que con un
  solo curso la tarjeta se estiraba a todo el ancho y su portada 4/3 crecía a
  más de 600px de alto. auto-fill conserva las pistas y la tarjeta mantiene su
  tamaño sin importar cuántos cursos queden.
*/
.courses__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
  min-width: 0;
}

.courses--catalog .courses__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

/* Con pistas fijas por auto-fill, el mensaje se centra a lo ancho de la grilla. */
.courses__empty {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  text-align: center;
}

.courses__card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  min-width: 0;
}

.courses__card--catalog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 35%) minmax(0, 1fr);
  width: 100%;
  max-width: 900px;
  justify-self: center;
  overflow: hidden;
  padding: 0;
  border-color: var(--color-border);
  background: var(--color-background-deep);
  box-shadow: var(--shadow-panel);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  animation: course-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.courses__card--catalog:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.courses__card--catalog:has(.courses__card-hit-area:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-color: var(--color-accent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.courses__card--catalog:only-child {
  width: 100%;
  max-width: 900px;
  justify-self: center;
}

.courses__card-hit-area {
  position: absolute;
  inset: 0;
  z-index: var(--z-elevated);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.courses__card-hit-area:focus-visible {
  outline: none;
}

.courses__card-media {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: start;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #071017;
}

.courses__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 25%, rgba(7, 10, 13, 0.82) 100%);
}

.courses__card-media--fallback {
  padding: 1.25rem;
  background:
    linear-gradient(rgba(0, 225, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 225, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 28%),
    linear-gradient(135deg, #06111a, #0c1720 58%, #071017);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.courses__card-media-label,
.courses__card-media-topic {
  position: relative;
  z-index: var(--z-content);
}

.courses__card-media-label {
  margin-bottom: 0.45rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.courses__card-media-topic {
  max-width: 80%;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

/* Sello de última actualización por tarjeta, panel de administración de cursos. */
.courses__card-updated-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-content);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-background) 70%, transparent);
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.courses__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 1.2rem 1.4rem 1.25rem;
}

.courses__card-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-field);
  margin-bottom: 1rem;
}

.courses__card-media .courses__card-image {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.courses__card-title {
  color: var(--color-text);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}

.courses__card--catalog .courses__card-title {
  margin-bottom: 0.45rem;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.25;
}

.courses__card-info {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.courses__card-info-row {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.courses__card-info-row::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--color-accent) 72%, var(--color-border));
}

.courses__card-info-row--modalidad::before {
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0 30%, transparent 35%);
}

.courses__card-info-row--fechas::before {
  border-radius: 2px;
  background: linear-gradient(var(--color-accent) 0 25%, transparent 25%);
}

.courses__card-info-row--horario::before {
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 44%, var(--color-accent) 44% 56%, transparent 56%) center 22% / 100% 40% no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 66% 56% / 35% 12% no-repeat;
}

.courses__card-info-label,
.courses__card-info-value {
  overflow-wrap: anywhere;
}

.courses__card-info-text {
  min-width: 0;
}

.courses__card-info-label {
  color: var(--color-text-subtle);
}

.courses__card-info-value {
  color: var(--color-text);
  font-weight: 500;
}

.courses__card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.courses__card-chip {
  padding: 0.25rem 0.65rem;
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-field) 72%, transparent);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
}

.courses__card-chip--proximamente {
  border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  color: var(--color-accent);
}

.courses__card-description {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

.courses__card--catalog .courses__card-description {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Grupo de checkboxes de días de la semana en el form de alta/edición. */
.courses__dias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  border: 0;
}

.courses__dias legend {
  width: 100%;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.courses__dia {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.courses__dia:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* Checkbox "Próximamente" con la misma altura visual que un .field de texto. */
.courses__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Acciones administrativas independientes del hit-area de la tarjeta. */
.courses__card-admin {
  position: relative;
  z-index: var(--z-highlight);
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.courses__action {
  padding: 0.4rem 1rem;
  border-radius: var(--radius-button);
  background: var(--color-field);
  color: var(--color-text);
  font-size: 0.8rem;
}

.courses__action--danger {
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
  color: var(--color-error-text);
}

.courses__action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Editar es un <a>, que no acepta disabled: se inertiza por atributo. */
.courses__action[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.55;
}

.courses__list--ocupada {
  opacity: 0.65;
}

.courses__form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@keyframes course-card-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .courses--catalog .courses__main {
    padding: 7rem 1rem 3rem;
  }

  .courses--catalog .courses__header {
    margin-bottom: 2.5rem;
  }

  .courses__card-body {
    padding: 1.1rem;
  }
}

@media (max-width: 760px) {
  .courses__card--catalog {
    grid-template-columns: minmax(0, 1fr);
  }

  .courses__card-media {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courses__card--catalog {
    animation: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .courses__card--catalog:hover {
    transform: none;
  }
}
}