/* Project Flows — estilos custom encima de Tailwind CDN */

/* Hidden por defecto para Alpine para evitar flash */
[x-cloak] { display: none !important; }

/* Anclas con offset para nav sticky */
:target { scroll-margin-top: 5rem; }

/* Smooth scroll global */
html { scroll-behavior: smooth; }

/* Selección con la marca */
::selection {
  background: #0B2545;
  color: white;
}

/* Subtle pattern para hero */
.hero-grid {
  background-image:
    linear-gradient(rgba(11,37,69,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,37,69,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Glow detrás del hero (decorativo) */
.hero-glow::before {
  content: '';
  position: absolute;
  inset: -10% -10% auto auto;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(19,194,194,0.18) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

/* Card hover lift */
.card-lift {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -12px rgba(11,37,69,0.18);
  border-color: rgba(19,194,194,0.4);
}

/* Form input base coherente con Tailwind */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.5rem;
  background: white;
  color: #0F172A;
  font-size: 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none;
  border-color: #13C2C2;
  box-shadow: 0 0 0 3px rgba(19,194,194,0.18);
}
.input.is-invalid {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

.label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #334155;
  margin-bottom: 0.4rem;
}
.error-text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #EF4444;
}

/* === Chatbot widget === */
/* Scrollbar más sutil dentro del chat */
.chatbot-scroll::-webkit-scrollbar { width: 6px; }
.chatbot-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
.chatbot-scroll::-webkit-scrollbar-track { background: transparent; }

/* Burbujas con HTML interno: links coherentes con la marca */
.chatbot-bubble a { color: #13C2C2; text-decoration: underline; }

/* En móvil pequeño, el panel ocupa casi toda la pantalla pero respeta safe area */
@media (max-width: 480px) {
  .chatbot-panel { right: 0.75rem !important; left: 0.75rem !important; }
}