/* PlANEACIÓN */
:root {
  --brand: #4C6FFF;
  /* primario suave */
  --ink: #1f2937;
  /* texto principal */
  --muted: #6b7280;
  /* texto secundario */
  --surface: #ffffff;
  --soft: #f3f4f6;
}

body {
  background: var(--soft);
  color: var(--ink);
}

.card-surface {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.section-title {
  font-weight: 700;
  font-size: 1.05rem;
}

/* Chips / pills (btn-check pattern) */
.chip {
  --bs-btn-color: #111827;
  --bs-btn-border-color: #e5e7eb;
  --bs-btn-bg: #fff;
  --bs-btn-active-bg: #eef2ff;
  --bs-btn-active-color: #111827;
  --bs-btn-hover-bg: #f8fafc;
  --bs-btn-hover-border-color: #e5e7eb;
  border-radius: 999px;
  padding: .4rem .9rem;
}

.chip .icon {
  font-size: 1rem;
  margin-right: .35rem;
}

.chip:hover {
  transform: translateY(-1px);
}

.btn-check:checked+.chip {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(76, 111, 255, .15);
  background-color: #eef2ff;
}

/* Selectable cards for Campos formativos */
.select-card {
  transition: all .15s ease;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}

.select-card:hover {
  transform: translateY(-1px);
}

.select-card .emoji {
  font-size: 1.4rem;
}

.btn-check:checked+.select-card {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(76, 111, 255, .15);
  background-color: #eef2ff;
}

/* Ejes limit badge */
.limit-note {
  font-size: .875rem;
  color: var(--muted);
}

/* Session segmented buttons */
.segmented .btn {
  border-radius: 12px;
  min-width: 56px;
}

/* Footer action */
.sticky-cta {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #ffffff 70%, rgba(255, 255, 255, 0));
  padding-top: 1rem;
}

/* Botones de sesión con bloqueo visual real */
.btn.disabled+.chip,
.btn:disabled+.chip,
.btn-sesion.disabled+.chip,
.btn-sesion:disabled+.chip {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
}

a.planea-login,
a.planea-register,
a.planea-terminos,
a.planea-aviso {
  color: #fc7f5b !important;
}

a.planea-login:hover,
a.planea-register:hover,
a.planea-terminos:hover,
a.planea-aviso:hover {
  color: #4B0082 !important;
}

.btn-copiar {
  background-color: #4B0082 !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

.btn-copiar:hover {
  background-color: #5d18a7 !important;
}

.btn-enviar:not([disabled]) {
  position: relative;
  background: #fff;
  color: #444;
  font-weight: 500;
  border-radius: 12px;
  border: none;
  padding: 8px 30px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  cursor: pointer;
}

.btn-enviar:not([disabled]):hover {
  color: #111;
  transform: translateY(-2px);
}

/* Borde tornasol animado solo si NO está deshabilitado */
.btn-enviar:not([disabled])::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(270deg, #7f00ff, #e100ff, #00c3ff, #7f00ff);
  background-size: 300% 300%;
  animation: gradientMove 5s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* Animación del borde */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* Efecto clic */
.btn-enviar:not([disabled]):active {
  transform: scale(0.97);
}

.btn-enviar[disabled] {
  background: #f0f0f0;
  color: #999;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  border-radius: 12px;
  border: 1px solid #999;
  ;
  padding: 8px 30px;
}

.ia-disclaimer{
  font-size: 13px;
  color: var(--muted);
  margin-top: .6rem;
  text-align: right;
  line-height: 1.4;
}

/* RESULTADO DE LA PLANEACION */
:root {
  --accent: #ff6d40;
  /* color institucional para íconos */
}

body {
  background: #f7f8fa
}

.header-title {
  font-weight: 800;
  letter-spacing: .1px
}

.actionbar .btn {
  border-radius: 1.25rem;
  padding: .5rem .9rem
}

.actionbar .btn i {
  font-size: 1.05rem
}

.summary-card {
  position: sticky;
  top: 1rem
}

.summary-list .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ececec;
  margin-right: .6rem;
  flex: 0 0 36px;
}

.summary-list .icon i,
.summary-list .icon svg{
  color: var(--accent);
}

.summary-list .item-title {
  font-weight: 700;
  margin: 0
}

.summary-list .item-sub {
  margin: 0;
  color: #6c757d
}

.ai-panel {
  min-height: 60vh
}

@media print {
  .no-print {
    display: none !important
  }

  .summary-card {
    position: static
  }

  body {
    background: #fff
  }

  .card {
    border: 0;
    box-shadow: none
  }
}

.blink {
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}