/* ---------- Base ---------- */
body {
  font-family: system-ui, sans-serif;
  color: #222;
  margin: 0;
  background: #fafafa;
}

.app-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* ---------- Header / menú ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.5rem;
  background: #1e293b;
  color: #fff;
}

.app-logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.app-nav a {
  color: #cbd5e1;
  text-decoration: none;
}

.app-nav a:hover {
  color: #fff;
}

.app-usuario {
  color: #94a3b8;
  font-size: .9rem;
}

.app-logout {
  background: #334155;
  padding: .3rem .7rem;
  border-radius: 5px;
}

/* ---------- Breadcrumbs ---------- */
.app-breadcrumbs {
  padding: .6rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  font-size: .9rem;
}

.app-breadcrumbs a {
  color: #2563eb;
  text-decoration: none;
}

.app-breadcrumbs .sep {
  margin: 0 .4rem;
  color: #999;
}

.app-breadcrumbs .actual {
  color: #666;
}

/* ---------- Wizard ---------- */
.wizard-progreso {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.5rem;
}

.wizard-progreso .paso {
  font-size: .8rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: #e9e9ef;
  color: #666;
}

.wizard-progreso .paso.completado { background: #1f9d55; color: #fff; }
.wizard-progreso .paso.actual { background: #2563eb; color: #fff; font-weight: 600; }

fieldset.pregunta {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
}

fieldset.pregunta legend { font-weight: 600; padding: 0 .4rem; }
fieldset.pregunta label { margin-right: 1.2rem; cursor: pointer; }

.comentario-nivel { display: block; margin: 1.5rem 0; }
.comentario-nivel textarea { width: 100%; margin-top: .4rem; font-family: inherit; }

.wizard-botones { display: flex; justify-content: space-between; margin-top: 1.5rem; }

/* ---------- Botones genéricos ---------- */
.btn-primario, .btn-secundario {
  padding: .6rem 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  display: inline-block;
}

.btn-primario { background: #2563eb; color: #fff; margin-left: auto; }
.btn-secundario { background: #eee; color: #333; }

/* ---------- Resultado (barras TRL) ---------- */
.trl-badge {
  display: inline-block;
  padding: .5rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-right: .6rem;
}

.trl-badge.alcanzado { background: #1f9d55; color: #fff; }
.trl-badge.progreso { background: #2563eb; color: #fff; }

.barra-trl-fila {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .5rem;
}

.barra-trl-fila .etiqueta { width: 60px; font-size: .85rem; color: #555; }

.barra-trl-fila .pista {
  flex: 1;
  background: #e9e9ef;
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}

.barra-trl-fila .relleno {
  height: 100%;
  background: #2563eb;
}

.barra-trl-fila .relleno.completo { background: #1f9d55; }
.barra-trl-fila .valor { width: 40px; font-size: .8rem; text-align: right; color: #555; }

/* ---------- Plan de acción ---------- */
.plan-seccion { margin-bottom: 2rem; }
.plan-seccion h2 { font-size: 1.1rem; margin-bottom: .8rem; }

.plan-item {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.plan-item.prioritaria { border-left-color: #f59e0b; background: #fffaf0; }

.plan-item .trl-origen {
  font-size: .75rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: .4rem;
}

.plan-item label {
  display: block;
  font-size: .85rem;
  color: #555;
  margin-top: .6rem;
}

.plan-item input[type=text],
.plan-item input[type=date],
.plan-item select,
.plan-item textarea {
  width: 100%;
  padding: .4rem;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: .2rem;
}

.plan-item .fila-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
}

.estrella-prioritaria {
  background: none;
  border: 1px solid #f59e0b;
  color: #f59e0b;
  border-radius: 6px;
  padding: .3rem .7rem;
  cursor: pointer;
}

.estrella-prioritaria.activa { background: #f59e0b; color: #fff; }

.verificacion-lista { list-style: none; padding: 0; margin: .8rem 0; }
.verificacion-lista li { margin-bottom: .4rem; }

/* ---------- Cronograma ---------- */
.cronograma-lista { display: flex; flex-direction: column; gap: .8rem; }

.cronograma-item {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 1rem;
}

.cronograma-item.vencida { border-left-color: #dc2626; background: #fef2f2; }
.cronograma-item.cumplida { border-left-color: #1f9d55; background: #f0fdf4; opacity: .8; }
.cronograma-item.cumplida strong { text-decoration: line-through; }

.cronograma-fecha {
  min-width: 110px;
  font-weight: 600;
  font-size: .9rem;
  color: #444;
}

.etiqueta-vencida {
  display: block;
  color: #dc2626;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cronograma-cuerpo { flex: 1; }
.cronograma-brecha { color: #666; font-size: .9rem; margin: .3rem 0; }

.badge-prioridad, .badge-estado {
  display: inline-block;
  font-size: .75rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-right: .4rem;
}

.prioridad-alta { background: #fee2e2; color: #b91c1c; }
.prioridad-media { background: #fef9c3; color: #a16207; }
.prioridad-baja { background: #e0f2fe; color: #0369a1; }

.estado-pendiente { background: #e5e7eb; color: #374151; }
.estado-en_curso { background: #dbeafe; color: #1e40af; }
.estado-cumplida { background: #dcfce7; color: #166534; }