/* Componente: modo de generación de sesión y estado de campos - SESIONES_REGULARES_2.2 */
.session-mode-card {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--level-color, var(--brand-cyan)) 28%, #d8e2ea);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--level-color, var(--brand-cyan)) 8%, #ffffff), #ffffff 72%);
  display: grid;
  grid-template-columns: minmax(190px, .9fr) repeat(2, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.session-mode-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
}

.session-mode-intro span {
  color: var(--brand-blue);
  font-size: .85rem;
  font-weight: 900;
}

.session-mode-intro p {
  margin: 0;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.35;
}

.session-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid #dce8f0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.session-mode-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--level-color, var(--brand-cyan)) 48%, #dce8f0);
  box-shadow: 0 10px 24px rgba(29, 41, 57, .08);
}

.session-mode-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--level-color, var(--brand-cyan));
}

.session-mode-option strong {
  display: block;
  color: #1f2937;
  font-size: .88rem;
  margin-bottom: 3px;
}

.session-mode-option small {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}

.session-mode-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--level-color, var(--brand-cyan)) 62%, #dce8f0);
  background: color-mix(in srgb, var(--level-color, var(--brand-cyan)) 9%, #ffffff);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--level-color, var(--brand-cyan)) 16%, transparent);
}

.result-actions {
  grid-template-columns: 1fr .72fr .82fr;
}

.prompt-output .dynamic.filled {
  background: color-mix(in srgb, #16a34a 16%, white);
  color: #064e3b;
  border: 1px solid color-mix(in srgb, #16a34a 42%, white);
  border-left: 4px solid #16a34a;
}

.prompt-output .dynamic.missing {
  background: color-mix(in srgb, #f59e0b 18%, white);
  color: #7c2d12;
  border: 1px solid color-mix(in srgb, #f59e0b 58%, white);
  border-left: 4px solid #f59e0b;
}

.prompt-output .dynamic.missing::before {
  content: "Pendiente: ";
  font-weight: 900;
}

.prompt-output .dynamic.is-located {
  outline: 3px solid rgba(244, 63, 94, .32);
  box-shadow: 0 0 0 7px rgba(244, 63, 94, .12);
  animation: missing-pulse .95s ease-in-out 2;
}

@keyframes missing-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@media (max-width: 980px) {
  .session-mode-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .result-actions {
    grid-template-columns: 1fr;
  }
}

/* SESIONES_REGULARES_2.2: botones compactos, vista JSON y localizador de faltantes. */
.result-actions {
  grid-template-columns: minmax(140px, 1fr) auto auto auto;
  align-items: stretch;
}

.result-actions .compact-action {
  min-width: 76px;
  padding: 8px 10px;
  font-size: .78rem;
  border-radius: 11px;
}

.result-actions [aria-pressed="true"] {
  border-color: var(--brand-cyan);
  background: #ecfaff;
  color: var(--brand-cyan-strong);
  box-shadow: 0 0 0 3px rgba(0, 157, 215, .10);
}

.prompt-output.json-view {
  background: #0f172a;
  color: #e5edf6;
  border-color: #243142;
  font-size: .82rem;
  line-height: 1.48;
}

.missing-field-flash {
  border-color: #facc15 !important;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .34), 0 0 0 8px rgba(250, 204, 21, .12) !important;
  animation: missing-field-blink .58s ease-in-out 4;
}

.missing-field-flash .multi-combo-trigger,
.missing-field-flash input,
.missing-field-flash select,
.missing-field-flash textarea {
  border-color: #facc15 !important;
}

@keyframes missing-field-blink {
  0%, 100% { outline: 0 solid rgba(250, 204, 21, 0); }
  50% { outline: 5px solid rgba(250, 204, 21, .44); }
}

@media (max-width: 720px) {
  .result-actions {
    grid-template-columns: 1fr 1fr;
  }
  .result-actions .primary {
    grid-column: 1 / -1;
  }
}