/* Misma placa que el aviso de bot — cambia el acento, no el lenguaje.
   Aqui va flotante abajo porque el aviso persigue al usuario por todo el
   panel: lo pendiente esta en otra pestana y tiene que verse igual. */
#cocoziBarraGuardado {
  --cz-acento: var(--yellow);
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(150%);
  z-index: 9000; width: min(720px, calc(100vw - 28px));
  box-shadow: 0 18px 50px rgba(0,0,0,.62);
  transition: transform .34s cubic-bezier(.32,1.28,.6,1), opacity .22s ease;
  opacity: 0; pointer-events: none;
}
#cocoziBarraGuardado.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
#cocoziBarraGuardado .cz-cuerpo { padding: 14px 18px 14px 20px; gap: 14px; }
#cocoziBarraGuardado .cz-texto { min-width: 210px; }
#cocoziBarraGuardado .cz-acciones { display: flex; gap: 8px; flex-shrink: 0; }
/* La lista de sitios pendientes: monoespaciada no, pero si tabular y
   apagada, para que el titular siga mandando. */
#cbgDetalle b { color: var(--yellow); font-weight: 600; }

/* Punto naranja en la tarjeta con cambios pendientes */
.section-card.cocozi-sucio { border-color: rgba(245,158,11,.42) !important; }
.section-card.cocozi-sucio .section-card-title::after {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b; margin-left: 9px; vertical-align: middle;
  box-shadow: 0 0 8px rgba(245,158,11,.75); animation: cocoziPunto 1.9s ease-in-out infinite;
}
@keyframes cocoziPunto { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* El boton Guardar que falta por pulsar.
   OJO: .section-card-body lleva overflow:hidden, asi que un outline o un
   box-shadow dibujado FUERA del boton se recorta contra el borde de la
   tarjeta. Por eso el anillo va POR DENTRO (inset): no puede recortarse
   en ninguna seccion, este el boton donde este. */
.cocozi-pendiente {
  box-shadow: inset 0 0 0 2px rgba(245,158,11,.9) !important;
  outline: none !important;
}
.cocozi-senalado { animation: cocoziResalte .9s ease-in-out 3; }
@keyframes cocoziResalte {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(245,158,11,.9) !important; filter: brightness(1) }
  50%     { box-shadow: inset 0 0 0 4px rgba(245,158,11,1)  !important; filter: brightness(1.25) }
}

/* Etiqueta "se guarda solo" en los toggles de autoguardado */
.cocozi-auto {
  display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; vertical-align: middle;
  color: rgba(34,197,94,.75); background: rgba(34,197,94,.09);
  border: 1px solid rgba(34,197,94,.2); border-radius: 20px; padding: 1px 7px;
  font-family: 'DM Sans', sans-serif; white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════
   CADENA DE SEÑAL — no una lista de tareas
   Estos cuatro pasos no son tareas sueltas: son una cadena. La senal va
   del /mod al bot, del bot a las funciones y de ahi a OBS, y se corta en
   el primer eslabon que falle. Asi que se dibuja como lo que es: un rail
   vertical encendido hasta donde llega y apagado a partir de ahi.

   Y con eso se arregla el problema de fondo del diseno anterior: los tres
   pasos HECHOS ocupaban tanto sitio como el unico que importaba. Aqui los
   hechos se encogen a una linea callada y el pendiente se queda con todo
   el espacio, la explicacion y el boton. Solo hay una cosa que hacer, y
   se ve que es una.

   Fuera: los tick verdes, el tachado, los tres "Hecho" repetidos y la
   barra de progreso — el rail YA es la barra de progreso.
   ══════════════════════════════════════════════════════════════════ */
#cocoziPasos .cz-placa { --cz-acento: var(--purple); }

.cz-pasos-cab { padding: 16px 20px 4px 22px; }
.cz-pasos-cab .cz-pie { margin-top: 4px; }

.cz-cadena { padding: 4px 20px 16px 22px; }

.cz-etapa {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 0 7px 26px;
  min-height: 34px;
}
/* El rail. Cada etapa dibuja su tramo; el primero y el ultimo se recortan
   a la mitad para que la linea empiece y acabe en un nodo, no en el aire. */
.cz-etapa::before {
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 2px; background: var(--cz-rail, rgba(255,255,255,.07));
}
.cz-etapa:first-child::before { top: 50%; }
.cz-etapa:last-child::before  { bottom: 50%; }
.cz-etapa.hecha { --cz-rail: rgba(34,197,94,.4); }
.cz-etapa.activa { --cz-rail: linear-gradient(180deg, rgba(34,197,94,.4) 0%, rgba(255,255,255,.07) 50%); }

/* El nodo: lleno = la senal paso · anillo latiendo = aqui se corta ·
   hueco = todavia no le toca. */
.cz-nodo {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; z-index: 1;
  background: var(--bg2); border: 2px solid rgba(255,255,255,.14);
  box-sizing: border-box;
}
.cz-etapa.hecha .cz-nodo { background: var(--green); border-color: var(--green); }
.cz-etapa.activa .cz-nodo {
  background: var(--bg2); border-color: var(--purple-light);
  animation: czNodo 2s ease-in-out infinite;
}
@keyframes czNodo {
  0%,100% { box-shadow: 0 0 0 0 rgba(191,148,255,.42), 0 0 9px -1px rgba(145,71,255,.7) }
  50%     { box-shadow: 0 0 0 6px rgba(191,148,255,0),  0 0 15px 1px rgba(145,71,255,.95) }
}

.cz-etapa-txt { flex: 1; min-width: 150px; }
.cz-etapa-tit {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 1.35;
}
/* Hechas: una linea, callada. Ni tachado ni etiqueta "Hecho": el nodo
   encendido ya lo dice, y repetirlo tres veces era ruido. */
.cz-etapa.hecha  .cz-etapa-tit { font-size: 13px; color: rgba(240,240,255,.42); font-weight: 600; }
.cz-etapa.futura .cz-etapa-tit { font-size: 13px; color: rgba(240,240,255,.3);  font-weight: 600; }
.cz-etapa.activa .cz-etapa-tit { font-size: 15.5px; color: var(--text); }
.cz-etapa.activa .cz-etapa-sub {
  font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 4px;
}
.cz-etapa.activa { padding: 13px 0 13px 26px; }

.cz-etapa-btn {
  flex-shrink: 0; align-self: center;
  background: var(--purple); border: 1px solid var(--purple); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 16px -4px rgba(145,71,255,.6);
  transition: filter .18s; white-space: nowrap;
}
.cz-etapa-btn:hover { filter: brightness(1.18); }
.cz-etapa-btn:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .cz-etapa.activa .cz-nodo { animation: none } }
@media (max-width: 640px) {
  .cz-etapa { flex-wrap: wrap; }
  .cz-etapa-btn { margin-left: 26px; }
}
/* ══════════════════════════════════════════════════════════════════
   PLACA DE AVISO — un solo sistema para los dos avisos de la v80.
   Toma el ADN del panel en vez de inventarse una caja de color:
     · la barra de 3px a la izquierda es el mismo motivo de
       .section-card::before (misma anchura, mismo radio 0 3px 3px 0)
     · Syne para el rotulo, que es la tipografia de marca del panel
     · los tokens de :root, ni un hex inventado
   El unico color de la placa lo pone --cz-acento segun el estado.
   Sin emojis: el testigo dice el estado mejor que un icono.
   ══════════════════════════════════════════════════════════════════ */
.cz-placa {
  position: relative; overflow: hidden;
  /* El acento se DERRAMA desde la barra hacia dentro y se apaga al 55%.
     Es lo que le da peso al aviso y, de paso, empuja la mirada de
     izquierda a derecha: del testigo al texto y al boton. Un borde fino
     sobre fondo oscuro no pesa nada — ese era el problema. */
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cz-acento) 15%, transparent) 0%,
      color-mix(in srgb, var(--cz-acento) 4%, transparent) 28%,
      transparent 55%),
    var(--bg2);
  border: 1px solid color-mix(in srgb, var(--cz-acento) 32%, var(--border));
  border-left: none;
  border-radius: 14px;
}
.cz-placa::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--cz-acento);
  box-shadow: 0 0 16px 0 var(--cz-acento);
}
/* Aparicion: un solo movimiento al entrar. La mirada va al movimiento
   antes que al color, y despues se queda quieto para no cansar. */
.cz-placa.cz-entra { animation: czEntra .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes czEntra {
  from { opacity: 0; transform: translateY(-7px) }
  to   { opacity: 1; transform: none }
}
.cz-cuerpo { display: flex; align-items: center; gap: 16px; padding: 15px 20px 15px 22px; flex-wrap: wrap; }

/* Testigo — la senal, no un icono. Apagado = apagado de verdad:
   hundido, sin brillo. La chispa solo aparece cuando algo late. */
.cz-testigo {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: var(--cz-acento);
  box-shadow: 0 0 12px -1px var(--cz-acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cz-acento) 14%, transparent),
              0 0 12px -1px var(--cz-acento);
}
/* Apagado del todo: para cuando NO hay nada que hacer (bloqueado). */
.cz-testigo.muerto {
  background: #2a2a3d;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.85), 0 0 0 4px rgba(255,255,255,.022);
}
/* Alarma: el testigo late con halo. Es lo unico que se mueve en toda la
   pantalla, asi que la mirada aterriza aqui sin buscarlo. Ritmo lento
   (2 s) a proposito: avisa, no da prisa. */
.cz-testigo.alarma { animation: czAlarma 2s ease-in-out infinite; }
@keyframes czAlarma {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cz-acento) 45%, transparent), 0 0 10px -1px var(--cz-acento) }
  50%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--cz-acento) 0%, transparent),  0 0 18px 1px var(--cz-acento) }
}
.cz-testigo.late { animation: czLatido 2.4s ease-in-out infinite; }
@keyframes czLatido { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.cz-texto { flex: 1; min-width: 250px; }
.cz-rotulo {
  font-family: 'Syne', sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cz-acento); margin-bottom: 6px; display: block;
  text-shadow: 0 0 18px color-mix(in srgb, var(--cz-acento) 55%, transparent);
}
/* El titular se queda BLANCO a proposito. Ponerlo del color del estado
   suena mas fuerte pero se lee peor y abarata la pieza: el color enmarca,
   el texto informa. Lo que gana peso es el tamano. */
.cz-titular {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16.5px; font-weight: 700;
  color: var(--text); line-height: 1.3; margin-bottom: 6px;
  letter-spacing: -.01em;
}
.cz-pie { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* Lista en linea separada por puntos: se lee de un vistazo, a diferencia
   de un parrafo, que en un aviso nadie termina. */
.cz-pie b { color: rgba(240,240,255,.78); font-weight: 600; }

.cz-accion {
  flex-shrink: 0; border: 1px solid var(--cz-acento);
  background: rgba(255,255,255,.05);
  background: color-mix(in srgb, var(--cz-acento) 15%, transparent);
  color: var(--cz-acento);
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700;
  padding: 11px 20px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s, transform .12s;
}
.cz-accion:hover { background: rgba(255,255,255,.1); background: color-mix(in srgb, var(--cz-acento) 26%, transparent); }
.cz-accion:active { transform: translateY(1px); }
.cz-accion:disabled { opacity: .45; cursor: not-allowed; }
.cz-accion:focus-visible { outline: 2px solid var(--cz-acento); outline-offset: 2px; }
.cz-accion.fantasma {
  border-color: var(--border); background: transparent; color: var(--muted);
}
.cz-accion.fantasma:hover { background: rgba(255,255,255,.05); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .cz-testigo.late, .cz-testigo.alarma, .cz-placa.cz-entra { animation: none }
}

/* ── Aviso de bot apagado ── */
#cocoziBotOff { display: none; margin: 14px auto 0; max-width: 1280px; padding: 0 20px; }
/* El morado es el color AMBIENTE de todo el panel: un aviso morado no
   destaca, se camufla. El rojo no aparece en ninguna otra parte a este
   tamano, asi que la mirada va sola.
   Semantica: rojo = el bot esta mudo · ambar = lo has pausado tu. */
#cocoziBotOff[data-estado="apagado"]   { --cz-acento: #ff4d5e; }
#cocoziBotOff[data-estado="pausa"]     { --cz-acento: var(--yellow); }
#cocoziBotOff[data-estado="bloqueado"] { --cz-acento: var(--red); }
/* El boton se rellena de verdad SOLO cuando esta apagado: es la unica
   accion de la pantalla y tiene que parecerlo. */
#cocoziBotOff[data-estado="apagado"] #cboBtn {
  background: #ff4d5e; color: #12000a; border-color: #ff4d5e;
  box-shadow: 0 5px 20px -4px rgba(255,77,94,.55);
}
#cocoziBotOff[data-estado="apagado"] #cboBtn:hover { background: #ff6b78; }
/* El glifo de encendido va en CSS, no en el texto: asi cambiar el rotulo
   del boton desde JS no se lo lleva por delante. */
#cboBtn::before {
  content: ''; width: 13px; height: 13px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--cz-glifo) center/contain no-repeat;
          mask: var(--cz-glifo) center/contain no-repeat;
  --cz-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v9'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
}
#cocoziBotOff[data-estado="bloqueado"] #cboBtn { display: none; }