/* ============================================================
   CIELO — CENTRO DE MANDO DEL AGENTE DE IA

   Los colores salen de los tokens --color-cielo* de main.css, que ya están
   definidos en los tres temas (claro, oscuro y cyber). Aquí no se declara
   ningún color de tema nuevo: si se declarara solo en :root, en modo noche
   se quedaría congelado y el texto acabaría blanco sobre blanco.

   Lo único fijo son los colores que van SOBRE el gradiente violeta de la
   cabecera y sobre el verde de WhatsApp — esos fondos son iguales en los
   tres temas, así que su texto también tiene que serlo.
   ============================================================ */

.cielo-consola { --cielo-radio: 18px; }

/* ── CABECERA ────────────────────────────────────────────────
   El orbe es la única pieza decorativa del panel y se gana el sitio: es lo
   que hace evidente de un vistazo si el asistente está vivo o dormido, sin
   leer una palabra. Dormido = quieto y gris. Vivo = respira. */

.cielo-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-6);
  margin-bottom: var(--space-6);
  border-radius: var(--cielo-radio);
  background: var(--grad-cielo);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cielo-cabecera::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 180%;
  background: radial-gradient(60% 50% at 30% 0%, rgba(255,255,255,0.28), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.cielo-cabecera__texto { flex: 1; min-width: 0; }
.cielo-cabecera h1 {
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 6px 0;
  color: #fff;
}
.cielo-cabecera__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.cielo-cabecera__sub {
  font-size: var(--font-sm);
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 52ch;
}

/* Punto que late cuando está atendiendo */
.cielo-latido {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
  animation: cielo-latir 2s infinite;
}
@keyframes cielo-latir {
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Orbe: tres anillos concéntricos que respiran desfasados */
.cielo-orbe {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
}
.cielo-orbe span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  animation: cielo-respirar 3.4s ease-in-out infinite;
}
.cielo-orbe span:nth-child(2) { inset: 12px; animation-delay: 0.35s; border-color: rgba(255,255,255,0.4); }
.cielo-orbe span:nth-child(3) {
  inset: 26px;
  background: rgba(255,255,255,0.92);
  border: none;
  animation-delay: 0.7s;
}
@keyframes cielo-respirar {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.09); opacity: 1; }
}
.cielo-orbe--dormido span { animation: none; opacity: 0.45; }
.cielo-orbe--dormido span:nth-child(3) { background: rgba(255,255,255,0.6); }

/* ── RUTA DE ACTIVACIÓN ──────────────────────────────────────
   Lista numerada con una línea que une los pasos. La línea no es adorno:
   es lo que convierte tres cajas sueltas en un camino con final. */

.cielo-ruta { list-style: none; margin: 0 0 var(--space-8); padding: 0; }

.cielo-paso {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.cielo-paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px; top: 44px; bottom: 6px;
  width: 2px;
  background: var(--color-border-2);
}
.cielo-paso.is-hecho:not(:last-child)::before { background: var(--color-cielo); }

.cielo-paso__marca {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--font-sm);
  background: var(--color-bg-2);
  border: 2px solid var(--color-border-2);
  color: var(--color-text-2);
  transition: all 0.25s ease;
}
.cielo-paso.is-abierto .cielo-paso__marca {
  background: var(--grad-cielo);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 5px var(--color-cielo-bg);
}
.cielo-paso.is-hecho .cielo-paso__marca {
  background: var(--color-cielo);
  border-color: transparent;
  color: #fff;
}

.cielo-paso__contenido { flex: 1; min-width: 0; padding-top: 6px; }
.cielo-paso__contenido h3 {
  font-size: var(--font-md);
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--color-text);
}
.cielo-paso__resumen {
  font-size: var(--font-sm);
  color: var(--color-text-2);
  margin: 0;
}
.cielo-paso.is-bloqueado { opacity: 0.45; }
.cielo-paso.is-bloqueado .cielo-paso__contenido { pointer-events: none; }

.cielo-paso__cuerpo {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-2);
  border: 1px solid var(--color-cielo-border);
  border-radius: var(--radius-md, 12px);
}

.cielo-explica {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  margin: 0 0 var(--space-4);
}
.cielo-nota {
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--color-text-3);
  margin: var(--space-3) 0 0;
}

/* ── BOTÓN DE WHATSAPP ───────────────────────────────────────
   Verde de WhatsApp, fijo en los tres temas: es una marca reconocible y
   cambiarla de color por el tema solo confundiría. */

.cielo-boton-wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  font-size: var(--font-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(18,140,126,0.75);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cielo-boton-wa:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(18,140,126,0.85);
}
.cielo-boton-wa:disabled { opacity: 0.6; cursor: wait; }

/* ── BOTÓN DE ENCENDIDO ──────────────────────────────────────
   Grande y a ancho completo: es la única acción de su paso y la que la
   clínica lleva tres pantallas esperando. */

.cielo-encender {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: var(--space-5);
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: var(--grad-cielo);
  color: #fff;
  font-size: var(--font-md);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(99,102,241,0.8);
  transition: transform 0.18s ease;
}
.cielo-encender:hover:not(:disabled) { transform: translateY(-2px); }
.cielo-encender__punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.9);
}

/* ── AVISOS ──────────────────────────────────────────────── */

.cielo-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  font-size: var(--font-sm);
}
.cielo-aviso__icono { font-size: 1.15rem; line-height: 1.3; flex-shrink: 0; }
.cielo-aviso strong { display: block; color: var(--color-text); margin-bottom: 2px; }
.cielo-aviso p { margin: 0; color: var(--color-text-2); line-height: 1.5; }
.cielo-aviso--error { border-color: var(--color-red-text); background: rgba(239,68,68,0.07); }
.cielo-aviso--ok    { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.cielo-aviso--plan  { border-color: var(--color-amber-text, #f59e0b); background: rgba(245,158,11,0.09); align-items: center; }
.cielo-aviso--plan > div { flex: 1; }

/* Pendiente de verificación de Meta: ámbar, no rojo. No está roto, está en
   cola. El color es la mitad del mensaje — en rojo, la clínica reconecta. */
.cielo-aviso--pendiente { border-color: var(--color-amber-text, #f59e0b); background: rgba(245,158,11,0.08); }
.cielo-aviso__pie {
  margin-top: var(--space-2) !important;
  font-size: var(--font-sm);
  color: var(--color-text-3, var(--color-text-2));
}
.cielo-aviso__pie a { color: var(--color-amber-text, #f59e0b); font-weight: 600; }
.cielo-aviso .btn { margin-top: var(--space-3); }

/* ── PLAN VENCIDO / SIN PLAN PRO ─────────────────────────────
   Pantalla completa, no un aviso de error. La diferencia importa: un plan
   vencido no es una avería que reintentar, es una decisión que tomar, y la
   pantalla tiene que dar la salida (renovar) y quitar el miedo a haber
   perdido el trabajo hecho. */

.cielo-sinplan {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-2);
  border: 1px solid var(--color-cielo-border);
  border-radius: var(--cielo-radio);
}
.cielo-sinplan h2 {
  font-size: var(--font-xl);
  font-weight: 800;
  margin: 0;
  color: var(--color-text);
}
.cielo-sinplan > p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
}
.cielo-sinplan__nota {
  max-width: 52ch;
  padding: var(--space-4);
  border-radius: var(--radius-md, 12px);
  background: var(--color-cielo-bg);
  border: 1px solid var(--color-cielo-border);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  text-align: left;
}
.cielo-sinplan__nota strong { display: block; color: var(--color-text); margin-bottom: 2px; }

/* Mismo orbe de la cabecera, pero apagado: dice "en pausa" sin una palabra. */
.cielo-sinplan__orbe { position: relative; width: 72px; height: 72px; }
.cielo-sinplan__orbe span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-cielo-border);
  opacity: 0.6;
}
.cielo-sinplan__orbe span:nth-child(2) { inset: 11px; }
.cielo-sinplan__orbe span:nth-child(3) {
  inset: 23px;
  border: none;
  background: var(--color-cielo);
  opacity: 0.35;
}

/* ── CAMPOS Y TABLAS ─────────────────────────────────────── */

.cielo-campos { display: flex; flex-direction: column; gap: 6px; margin: var(--space-4) 0; }
.cielo-campos .form-label { margin-top: var(--space-2); }

.cielo-tabla { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-3); }
.cielo-fila {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.cielo-fila__quitar {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border-2);
  background: transparent;
  color: var(--color-text-3);
  cursor: pointer;
  font-size: 0.85rem;
}
.cielo-fila__quitar:hover { border-color: var(--color-red-text); color: var(--color-red-text); }

.cielo-copia { margin-bottom: var(--space-3); }
.cielo-copia label {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-text-2);
  margin-bottom: 4px;
}
.cielo-copia > div {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
}
.cielo-copia code {
  flex: 1;
  font-size: 0.72rem;
  color: var(--color-text-2);
  overflow-x: auto;
  white-space: nowrap;
}

.cielo-avanzado { margin-top: var(--space-5); }
.cielo-avanzado summary {
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-indigo-text);
  padding: 6px 0;
}
.cielo-avanzado[open] summary { margin-bottom: var(--space-3); }

.cielo-motor {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-cielo-bg);
  border: 1px solid var(--color-cielo-border);
  border-radius: var(--radius-md, 12px);
}
/* Variante informativa: todavía no hay motor conectado, así que la caja
   explica el coste en vez de anunciar un estado que aún no existe. */
.cielo-motor--pendiente {
  background: var(--color-bg);
  border-style: dashed;
  margin-bottom: var(--space-4);
}
.cielo-motor__icono { font-size: 1.6rem; }
.cielo-motor strong { display: block; font-size: var(--font-sm); color: var(--color-text); }
.cielo-motor p { margin: 2px 0 0; font-size: var(--font-xs); color: var(--color-text-2); line-height: 1.45; }
.cielo-motor > div { flex: 1; min-width: 0; }

.cielo-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--space-4);
  cursor: pointer;
}
.cielo-check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--color-cielo); }
.cielo-check span { font-size: var(--font-sm); color: var(--color-text-2); line-height: 1.5; }
.cielo-check small { display: block; font-size: var(--font-xs); color: var(--color-text-3); margin-top: 2px; }

/* ── BLOQUE DE SEGURIDAD ─────────────────────────────────── */

.cielo-seguro {
  padding: var(--space-6);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--cielo-radio);
}
.cielo-seguro h3 {
  font-size: var(--font-md);
  font-weight: 700;
  margin: 0 0 var(--space-5);
  color: var(--color-text);
}
.cielo-seguro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.cielo-seguro__item span { font-size: 1.25rem; }
.cielo-seguro__item strong {
  display: block;
  font-size: var(--font-sm);
  color: var(--color-text);
  margin: 6px 0 2px;
}
.cielo-seguro__item p { margin: 0; font-size: var(--font-xs); color: var(--color-text-2); line-height: 1.5; }
.cielo-seguro__pie {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-2);
  font-size: var(--font-xs);
  color: var(--color-text-3);
  line-height: 1.55;
}

/* ── CENTRO DE MANDO ─────────────────────────────────────── */

.cielo-alerta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-amber-text, #f59e0b);
  background: rgba(245,158,11,0.09);
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease;
}
.cielo-alerta:hover { transform: translateX(3px); }
.cielo-alerta__n {
  flex-shrink: 0;
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--color-amber-text, #f59e0b);
  color: #fff;
  font-weight: 800;
}
.cielo-alerta span:nth-child(2) { flex: 1; font-size: var(--font-sm); color: var(--color-text-2); line-height: 1.45; }
.cielo-alerta strong { display: block; color: var(--color-text); }
.cielo-alerta__ir { font-size: var(--font-sm); font-weight: 700; color: var(--color-amber-text, #f59e0b); }

.cielo-pestanas {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-5);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 12px;
}
.cielo-pestanas button {
  flex: 1;
  padding: 9px;
  border: none;
  background: none;
  border-radius: 9px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-2);
  cursor: pointer;
  transition: all 0.18s ease;
}
.cielo-pestanas button:hover { color: var(--color-text); }
.cielo-pestanas button.is-activa { background: var(--grad-cielo); color: #fff; }

.cielo-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.cielo-cifra {
  padding: var(--space-5);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 14px;
}
.cielo-cifra__n {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-cielo);
  font-variant-numeric: tabular-nums;
}
.cielo-cifra__t { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--color-text); margin-top: 6px; }
.cielo-cifra__s { display: block; font-size: var(--font-xs); color: var(--color-text-3); margin-top: 2px; }

.cielo-grafico, .cielo-consumo {
  padding: var(--space-5);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 14px;
  margin-bottom: var(--space-4);
}
.cielo-grafico h4, .cielo-consumo h4 {
  font-size: var(--font-sm);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.cielo-consumo p { margin: 0; font-size: var(--font-sm); color: var(--color-text-2); line-height: 1.55; }

.cielo-barras {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 90px;
}
.cielo-barra { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.cielo-barra > div {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--grad-cielo);
  opacity: 0.85;
}

/* ── BANDEJA ─────────────────────────────────────────────── */

.cielo-bandeja {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--space-4);
  min-height: 460px;
}
.cielo-lista {
  list-style: none; margin: 0; padding: 0;
  max-height: 560px; overflow-y: auto;
  border: 1px solid var(--color-border-2);
  border-radius: 12px;
  background: var(--color-bg-2);
}
.cielo-lista li {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-2);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cielo-lista li:last-child { border-bottom: none; }
.cielo-lista li:hover { background: var(--color-cielo-bg); }
.cielo-lista li.is-activa { background: var(--color-cielo-bg); box-shadow: inset 3px 0 0 var(--color-cielo); }
.cielo-lista__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cielo-lista__top strong { font-size: var(--font-sm); color: var(--color-text); }
.cielo-lista__meta { display: block; font-size: var(--font-xs); color: var(--color-text-3); margin-top: 3px; }

.cielo-tag {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
}
.cielo-tag--espera { background: var(--color-amber-text, #f59e0b); color: #fff; }
.cielo-tag--baja   { background: var(--color-border-2); color: var(--color-text-3); }

.cielo-hilo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-2);
  border-radius: 12px;
  background: var(--color-bg-2);
  overflow: hidden;
}
.cielo-hilo__cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-2);
}
.cielo-hilo__cab strong { font-size: var(--font-sm); color: var(--color-text); }
.cielo-hilo__cuerpo {
  flex: 1;
  padding: var(--space-4);
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cielo-msg { max-width: 78%; }
.cielo-msg p {
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: var(--font-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cielo-msg span { display: block; font-size: 0.65rem; color: var(--color-text-3); margin-top: 3px; }
.cielo-msg--ent { align-self: flex-start; }
.cielo-msg--ent p { background: var(--color-bg); color: var(--color-text); border-bottom-left-radius: 4px; }
.cielo-msg--bot, .cielo-msg--clinica, .cielo-msg--sistema { align-self: flex-end; text-align: right; }

/* Los dos fondos van fijos y NO con var(--grad-cielo), aunque el violeta del
   tema quedaría más bonito. El motivo es medible: en modo noche el gradiente
   del tema arranca en #a78bfa, y el texto blanco encima da 2.7 de contraste
   —ilegible para texto de párrafo— mientras que este violeta fijo da 6.7 en
   los tres temas. Es el mismo criterio que ya sigue .cielo-btn-solid en
   components.css: cuando el fondo es fijo, el texto también tiene que serlo. */
.cielo-msg--bot p {
  background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cielo-msg--clinica p { background: #0e7c6d; color: #fff; border-bottom-right-radius: 4px; }
.cielo-msg--sistema p {
  background: transparent;
  border: 1px dashed var(--color-border-2);
  color: var(--color-text-3);
  font-style: italic;
}

.cielo-hilo__pie {
  display: flex; gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-2);
}
.cielo-hilo__pie--bloqueado {
  display: block;
  font-size: var(--font-xs);
  color: var(--color-text-3);
  line-height: 1.5;
  background: var(--color-bg);
}

.cielo-vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-2);
  flex: 1;
}
.cielo-vacio span { font-size: 2rem; opacity: 0.7; }
.cielo-vacio strong { color: var(--color-text); font-size: var(--font-md); }
.cielo-vacio p { margin: 0; font-size: var(--font-sm); }
.cielo-vacio--chico { padding: var(--space-6); }

/* ── AJUSTES ─────────────────────────────────────────────── */

.cielo-ajustes { display: flex; flex-direction: column; gap: var(--space-6); }
.cielo-ajustes section {
  padding: var(--space-5);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 14px;
}
.cielo-ajustes h4 {
  font-size: var(--font-sm);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.cielo-ajustes__pie { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── ESQUELETO DE CARGA ──────────────────────────────────── */

.cielo-esqueleto > div {
  border-radius: var(--cielo-radio);
  background: linear-gradient(90deg, var(--color-bg-2) 25%, var(--color-border-2) 50%, var(--color-bg-2) 75%);
  background-size: 200% 100%;
  animation: cielo-brillo 1.4s ease-in-out infinite;
  margin-bottom: var(--space-4);
}
.cielo-esqueleto__hero { height: 150px; }
.cielo-esqueleto__fila { height: 78px; }
@keyframes cielo-brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── MÓVIL ───────────────────────────────────────────────── */

@media (max-width: 720px) {
  .cielo-cabecera { flex-direction: column; text-align: center; padding: var(--space-6) var(--space-4); }
  .cielo-cabecera__eyebrow { justify-content: center; }
  .cielo-cabecera__sub { max-width: none; }
  .cielo-orbe { width: 64px; height: 64px; }
  .cielo-orbe span:nth-child(2) { inset: 9px; }
  .cielo-orbe span:nth-child(3) { inset: 20px; }

  .cielo-bandeja { grid-template-columns: 1fr; }
  .cielo-lista { max-height: 260px; }

  /* El precio y la duración caben en una línea; el nombre necesita la suya. */
  .cielo-fila { grid-template-columns: 1fr 1fr; grid-template-areas: "s s" "p d" "q q"; }
  .cielo-fila [data-campo="servicio"] { grid-area: s; }
  .cielo-fila [data-campo="precio"]   { grid-area: p; }
  .cielo-fila [data-campo="duracion"] { grid-area: d; }
  .cielo-fila__quitar { grid-area: q; width: 100%; }

  .cielo-boton-wa { width: 100%; justify-content: center; }
  .cielo-copia code { font-size: 0.62rem; }
}

/* ── ACCESIBILIDAD ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cielo-orbe span, .cielo-latido, .cielo-esqueleto > div { animation: none; }
  .cielo-alerta:hover, .cielo-boton-wa:hover, .cielo-encender:hover { transform: none; }
}

/* ══════════════════════════════════════════
   GUÍA DE CONEXIÓN A MANO

   Mientras CuponPass no sea Tech Provider de Meta, la clínica tiene que
   crear su propia app y pegar sus claves. Estos son los pasos numerados de
   esa guía: se ven como una receta, no como un formulario técnico, porque
   quien los sigue es la persona del mesón, no un programador.
   ══════════════════════════════════════════ */

.cielo-guia {
  counter-reset: paso-meta;
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
}

.cielo-guia > li {
  counter-increment: paso-meta;
  position: relative;
  padding: 0 0 var(--space-5) 44px;
}

/* La línea que une los pasos: se corta en el último, o quedaría colgando. */
.cielo-guia > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 6px;
  width: 2px;
  background: var(--color-border-2);
}

.cielo-guia > li::before {
  content: counter(paso-meta);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-cielo, var(--color-indigo));
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cielo-guia > li strong {
  display: block;
  color: var(--color-text);
  font-size: var(--font-md);
  margin-bottom: 4px;
  padding-top: 5px;
}

.cielo-guia > li p {
  margin: 0;
  color: var(--color-text-2);
  font-size: var(--font-sm);
  line-height: 1.7;
}

.cielo-guia code {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
  word-break: break-all;
}

/* "(paso 3)" al lado de cada campo: dice de dónde sale ese dato sin que la
   persona tenga que volver a leer la guía entera. */
.cielo-donde {
  font-weight: 500;
  color: var(--color-text-3);
  font-size: 0.85em;
}

/* Texto de apoyo bajo un campo de los ajustes. Explica la consecuencia de lo
   que se escribe arriba, que es lo que evita que alguien ponga 5 minutos y
   luego no entienda por qué el asistente ofrece horas cada cinco minutos. */
.cielo-ayuda {
  margin: 6px 0 0;
  font-size: var(--font-xs);
  color: var(--color-text-2);
  line-height: 1.5;
}

/* Un número con su unidad al lado ("30 minutos"). Sin la unidad a la vista,
   un campo que pide minutos recibe horas. */
.cielo-campo-unidad {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cielo-campo-unidad .form-input { max-width: 120px; }
.cielo-campo-unidad span {
  font-size: var(--font-sm);
  color: var(--color-text-2);
}

/* Marca un campo que se puede dejar vacío. Quien configura esto lo hace una
   vez y con dudas: saber qué es obligatorio y qué no evita que se atasque. */
.cielo-opcional {
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--color-text-3);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Numeración de las secciones de ajustes: da sensación de recorrido con
   principio y final, en vez de una lista de cajas sueltas. */
.cielo-ajustes h4 { display: flex; align-items: baseline; gap: 6px; }