/* Portada de los cursos de Copilot de Tecnasa U. Se apoya en tokens.css y hub.css (los mismos de
   copilot.rizo.ma y copilot-areas.rizo.ma) y solo agrega sus componentes. */

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
summary, .btn-copiar { cursor: pointer; }

.portal .hub-header { margin-bottom: var(--space-12); }
.portal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.portal-nav a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--bg-dark-border);
  border-radius: 999px;
  color: var(--text-dark-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
}
.portal-nav a:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

.portal-section { margin-bottom: var(--space-16); scroll-margin-top: var(--space-8); }
.portal-intro { color: var(--text-dark-secondary); max-width: 760px; line-height: 1.7; margin-bottom: var(--space-6); }
.portal-subtitulo { font-size: 1.25rem; font-weight: var(--font-bold); margin: var(--space-10) 0 var(--space-4); }

/* Cursos */
.cursos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.curso-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--bg-dark-surface);
  border: 1px solid rgba(55, 184, 236, 0.35);
  border-radius: var(--radius-xl);
}
.curso-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--accent-yellow);
  color: var(--accent-yellow);
}
.curso-card h3 { font-size: 1.75rem; font-weight: var(--font-extrabold); line-height: 1.2; }
.curso-sub { color: var(--accent-cyan); font-weight: var(--font-semibold); }
.curso-datos { list-style: none; display: grid; gap: var(--space-2); color: var(--text-dark-secondary); font-size: 0.9375rem; }
.curso-datos li::before { content: "•"; color: var(--accent-cyan); margin-right: var(--space-2); }
.curso-para { color: var(--text-dark-secondary); line-height: 1.6; }
.curso-para strong { color: var(--text-dark-primary); }
.btn-curso {
  margin-top: auto;
  align-self: flex-start;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--accent-cyan);
  color: #04121A;
  font-weight: var(--font-bold);
  text-decoration: none;
}
.btn-curso:hover { background: #5CC8F2; }

/* Objetivos */
.objetivos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.objetivos-col { background: var(--bg-dark-surface); border: 1px solid var(--bg-dark-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.objetivos-col h3 { font-size: 1.125rem; color: var(--accent-cyan); margin-bottom: var(--space-4); }
.objetivos-col ol { padding-left: var(--space-5); display: grid; gap: var(--space-3); color: var(--text-dark-secondary); line-height: 1.6; }

/* Prompting */
.elementos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.elemento { background: var(--bg-dark-surface); border: 1px solid var(--bg-dark-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.elemento-num { font-family: var(--font-mono); font-weight: var(--font-black); font-size: 1.5rem; color: var(--accent-cyan); }
.elemento h3 { font-size: 1.125rem; margin: var(--space-1) 0 var(--space-2); }
.elemento p { color: var(--text-dark-secondary); line-height: 1.5; font-size: 0.9375rem; }
.elemento-ej { font-family: var(--font-mono); font-size: 0.8125rem !important; margin-top: var(--space-3); color: var(--text-dark-tertiary) !important; }

.antes-despues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: stretch; }
.prompt-antes { border: 1px solid rgba(239, 68, 68, 0.5); border-radius: var(--radius-lg); padding: var(--space-5); background: rgba(239, 68, 68, 0.06); }
.ad-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--font-bold); color: #FCA5A5; }
.ad-prompt { font-family: var(--font-mono); margin: var(--space-3) 0; }
.ad-nota { color: var(--text-dark-secondary); font-size: 0.9375rem; line-height: 1.5; }

.prompt-card { background: #0F172A; border: 2px solid var(--accent-cyan); border-radius: var(--radius-lg); padding: var(--space-5); }
.prompt-card-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.prompt-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--font-bold); color: var(--accent-cyan); }
.btn-copiar {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
}
.btn-copiar:hover { background: var(--accent-cyan); color: #0F172A; }
.btn-copiar.copiado { background: var(--success); border-color: var(--success); color: #FFFFFF; }
.btn-copiar.error { background: var(--error); border-color: var(--error); color: #FFFFFF; }
.prompt-content { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.8; color: #F8FAFC; white-space: pre-wrap; overflow-wrap: anywhere; }

.habitos { list-style: none; counter-reset: habito; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.habitos li {
  counter-increment: habito;
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-16);
  background: var(--bg-dark-surface);
  border: 1px solid var(--bg-dark-border);
  border-radius: var(--radius-lg);
  color: var(--text-dark-secondary);
  line-height: 1.6;
}
.habitos li::before {
  content: counter(habito);
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  font-family: var(--font-mono);
  font-weight: var(--font-black);
  font-size: 1.5rem;
  color: var(--accent-cyan);
}
.habitos strong { color: var(--text-dark-primary); }

/* Recomendaciones y material */
.reco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.reco-col { background: var(--bg-dark-surface); border: 1px solid var(--bg-dark-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.reco-col h3 { color: var(--accent-cyan); font-size: 1.125rem; margin-bottom: var(--space-3); }
.reco-col ul { padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--text-dark-secondary); line-height: 1.6; }

.material-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-8); }
.material-grid h3 { font-size: 1.125rem; margin-bottom: var(--space-4); }
.ref-list { list-style: none; display: grid; gap: var(--space-3); }
.ref-item { display: flex; flex-direction: column; gap: var(--space-1); background: var(--bg-dark-surface); border: 1px solid var(--bg-dark-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.ref-item a { color: var(--accent-cyan); font-weight: var(--font-semibold); text-decoration: none; }
.ref-item a:hover { text-decoration: underline; }
.ref-meta { font-size: 0.875rem; color: var(--text-dark-tertiary); }

/* Glosario */
.glosario { background: var(--bg-dark-surface); border: 1px solid var(--bg-dark-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.glosario summary { font-weight: var(--font-semibold); color: var(--accent-cyan); }
.glosario dl { display: grid; grid-template-columns: minmax(160px, auto) 1fr; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); }
.glosario dt { font-weight: var(--font-bold); }
.glosario dd { color: var(--text-dark-secondary); line-height: 1.6; }
.portal-legal { font-size: 0.75rem; color: var(--text-dark-tertiary); }

@media (max-width: 900px) {
  .cursos-grid, .objetivos-grid, .antes-despues, .reco-grid, .material-grid, .habitos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hub-container.portal { padding-left: var(--space-4); padding-right: var(--space-4); }
  .curso-card { padding: var(--space-6); }
  .glosario dl { grid-template-columns: 1fr; gap: var(--space-1); }
  .glosario dd { margin-bottom: var(--space-3); }
  .habitos { grid-template-columns: 1fr; }
}