/* Chemical EXS v2.9.91 · guía visual sólo para campos realmente pendientes */
:root{
  --cx-keyboard-blue:#0878f9;
  --cx-keyboard-cyan:#21b8ff;
  --cx-keyboard-ink:#0d2748;
  --cx-keyboard-soft:rgba(8,120,249,.12);
  --cx-keyboard-next:#7c3aed;
}

.public-page :is(input,select,textarea,button,a[href]):focus,
.panel-body :is(input,select,textarea,button,a[href]):focus{
  outline:none;
}

.public-page :is(input:not([type="hidden"]),select,textarea):focus,
.panel-body :is(input:not([type="hidden"]),select,textarea):focus{
  border-color:var(--cx-keyboard-blue)!important;
  box-shadow:0 0 0 4px rgba(8,120,249,.16),0 12px 30px rgba(8,120,249,.12)!important;
  background-color:#fff!important;
}

.public-page :is(button,a[href],[role="button"]):focus-visible,
.panel-body :is(button,a[href],[role="button"]):focus-visible{
  outline:3px solid rgba(33,184,255,.72)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 7px rgba(8,120,249,.12),0 12px 28px rgba(8,120,249,.18)!important;
}

.cx-field-current,
.cx-next-field,
.cx-card-current{
  position:relative;
  isolation:isolate;
}

.cx-field-current{
  outline:2px solid var(--cx-keyboard-blue)!important;
  outline-offset:5px!important;
  border-radius:16px!important;
  box-shadow:0 0 0 8px rgba(8,120,249,.08),0 16px 38px rgba(10,71,150,.12)!important;
}

.cx-card-current{
  outline:2px solid rgba(8,120,249,.35)!important;
  outline-offset:5px!important;
  box-shadow:0 22px 54px rgba(8,83,178,.12)!important;
}

.cx-next-field{
  outline:2px solid var(--cx-keyboard-next)!important;
  outline-offset:5px!important;
  border-radius:16px!important;
  box-shadow:0 0 0 8px rgba(124,58,237,.08),0 14px 34px rgba(90,42,170,.12)!important;
  animation:cxNextFieldPulse 1.85s ease-in-out infinite;
}

.cx-field-current::after,
.cx-next-field::after{
  position:absolute;
  z-index:30;
  top:-15px;
  right:12px;
  padding:4px 9px;
  border-radius:999px;
  color:#fff;
  font-size:10px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 8px 20px rgba(10,55,120,.2);
}

.cx-next-field::after{
  content:"Sigue aquí";
  background:linear-gradient(135deg,#7c3aed,#a855f7);
}

.cx-field-current::after{
  content:"Escribe aquí";
  background:linear-gradient(135deg,var(--cx-keyboard-blue),var(--cx-keyboard-cyan));
}

.cx-next-action{
  position:relative;
  outline:3px solid rgba(8,120,249,.45)!important;
  outline-offset:4px!important;
  box-shadow:0 0 0 8px rgba(8,120,249,.09),0 16px 36px rgba(8,120,249,.22)!important;
  animation:cxNextActionPulse 1.65s ease-in-out infinite;
}

.cx-next-action::after{
  content:"Listo para guardar";
  position:absolute;
  z-index:20;
  right:10px;
  top:-13px;
  padding:4px 9px;
  border-radius:999px;
  background:#082e68;
  color:#fff;
  font-size:10px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
  pointer-events:none;
}

.cx-keyboard-invalid{
  outline-color:#e11d48!important;
  box-shadow:0 0 0 8px rgba(225,29,72,.09)!important;
}

.cx-keyboard-invalid::after{
  content:"Completa este campo"!important;
  background:linear-gradient(135deg,#be123c,#ef4444)!important;
}

@keyframes cxNextFieldPulse{
  0%,100%{box-shadow:0 0 0 7px rgba(124,58,237,.07),0 14px 34px rgba(90,42,170,.11)}
  50%{box-shadow:0 0 0 11px rgba(124,58,237,.13),0 18px 42px rgba(90,42,170,.17)}
}

@keyframes cxNextActionPulse{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-2px);filter:brightness(1.06)}
}

@media (max-width:760px){
  .cx-field-current::after,
  .cx-next-field::after,
  .cx-next-action::after{
    right:8px;
    font-size:9px;
    max-width:calc(100% - 16px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cx-field-current::after{content:"Escribe aquí"}
  .cx-field-current,.cx-next-field{outline-offset:3px!important}
}

@media (prefers-reduced-motion:reduce){
  .cx-next-field,.cx-next-action{animation:none!important}
}