/* ============================================================
   ELECTROTECH DASHBOARD.CSS
   Panel del Alumno — simple, grande y de alto contraste
   (público objetivo: personas mayores no técnicas)
   ============================================================ */

.electrotech-dashboard-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text, #3d3d3d);
}

/* ------------------------------------------------------------
   Saludo
   ------------------------------------------------------------ */
.electrotech-dash-greeting {
  margin-bottom: 32px;
}

.electrotech-dash-greeting h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary, #013a5e);
  margin: 0 0 8px;
  line-height: 1.15;
}

.electrotech-dash-greeting p {
  font-size: 1.15rem;
  color: var(--color-text, #3d3d3d);
  margin: 0;
}

/* ------------------------------------------------------------
   Grid de cursos — máximo 2 columnas
   ------------------------------------------------------------ */
.electrotech-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* ------------------------------------------------------------
   Tarjeta de curso — grande y clara
   ------------------------------------------------------------ */
.electrotech-dash-card {
  background: #fff;
  border: 2px solid #e3e8ec;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(0,60,90,0.08);
  display: flex;
  flex-direction: column;
}

.electrotech-dash-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark, #002b40);
  margin: 0 0 20px;
  line-height: 1.25;
}

/* Progreso */
.electrotech-dash-progress {
  margin-bottom: 24px;
}

.electrotech-dash-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #3d3d3d);
  margin-bottom: 8px;
}

.electrotech-dash-pct {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary, #013a5e);
}

.electrotech-dash-bar {
  height: 16px;
  background: #e3e8ec;
  border-radius: 10px;
  overflow: hidden;
}

.electrotech-dash-bar-fill {
  height: 100%;
  background: var(--color-primary, #013a5e);
  border-radius: 10px;
  transition: width 0.4s ease;
}

.electrotech-dash-bar-fill.is-complete {
  background: var(--color-secondary, #0a7cc2);
}

/* Botón grande "Continuar curso" */
.electrotech-dash-btn {
  display: block;
  margin-top: auto;
  width: 100%;
  padding: 18px 20px;
  background: var(--color-secondary, #0a7cc2);
  color: #fff !important;
  text-align: center;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.electrotech-dash-btn:hover,
.electrotech-dash-btn:focus {
  background: #0866a1;
  color: #fff !important;
  transform: translateY(-2px);
}

.electrotech-dash-btn.is-complete {
  background: var(--color-primary, #013a5e);
}

.electrotech-dash-btn.is-complete:hover {
  background: var(--color-primary-dark, #002b40);
}

/* ------------------------------------------------------------
   Estado vacío
   ------------------------------------------------------------ */
.electrotech-dash-empty {
  background: #fff;
  border: 2px solid #e3e8ec;
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
}

.electrotech-dash-empty p {
  font-size: 1.2rem;
  color: var(--color-text, #3d3d3d);
  margin: 0 0 24px;
}

.electrotech-dash-empty .electrotech-dash-btn {
  display: inline-block;
  width: auto;
  padding: 16px 36px;
}

/* ------------------------------------------------------------
   Responsive — mobile-first: una sola columna
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .electrotech-dashboard-wrap {
    padding: 28px 16px 48px;
  }
  .electrotech-dash-grid {
    grid-template-columns: 1fr;
  }
  .electrotech-dash-greeting h1 {
    font-size: 1.8rem;
  }
}