/* ==========================================================================
   Modal de bienvenida Paty IA
   Estilos namespaced con prefijo .pbi- para no colisionar con los estilos
   existentes de la vista PatyIA (.modal, .slide, .dot, .inner, .hero, etc.)
   ========================================================================== */

/* Overlay bloqueante: no se puede cerrar tocando fuera */
.pbi-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 51, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  z-index: 99999;
  overflow-y: auto;
  animation: pbi-fade-in 0.2s ease;
}

@keyframes pbi-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pbi-modal {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 24px rgba(0, 80, 160, 0.18);
  font-family: Arial, Helvetica, sans-serif;
  animation: pbi-pop-in 0.25s ease;
}

@keyframes pbi-pop-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.pbi-header-inner {
  background: #00AAF8;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.pbi-header-badge {
  background: #fff;
  color: #003787;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pbi-header-badge i { font-size: 11px; color: #F5A623; }

.pbi-progress-bar { height: 3px; background: #D5E8FA; }
.pbi-progress-fill { height: 3px; background: #003787; transition: width 0.3s ease; }

.pbi-slide { display: none; }
.pbi-slide.pbi-active { display: block; }
.pbi-inner { padding: 20px 26px 8px; }

/* BIENVENIDA */
.pbi-welcome-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2.5px solid #00AAF8;
  background: #EEF6FD;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.pbi-welcome-circle img { width: 80px; }
.pbi-welcome-title {
  font-size: 19px;
  font-weight: 800;
  color: #1B1E35;
  line-height: 1.25;
  margin-bottom: 6px;
}
.pbi-welcome-title span { color: #00AAF8; }
.pbi-welcome-text {
  font-size: 12.5px;
  color: #4F505C;
  line-height: 1.55;
  margin-bottom: 16px;
}

/* HERO */
.pbi-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pbi-hero img { width: 50px; flex-shrink: 0; }
.pbi-hero-title { font-size: 15px; font-weight: 800; color: #1B1E35; line-height: 1.25; }
.pbi-hero-sub { font-size: 11.5px; color: #4F505C; margin-top: 3px; line-height: 1.4; }
.pbi-hero-sub strong { color: #003787; }

/* EJEMPLOS */
.pbi-ejemplo-row { display: flex; gap: 9px; margin-bottom: 14px; }
.pbi-ejemplo-box { flex: 1; border-radius: 8px; padding: 11px 13px; }
.pbi-ejemplo-box.pbi-si { background: #F0FFF4; border: 1px solid #6ee7a0; }
.pbi-ejemplo-box.pbi-no { background: #FFF1F1; border: 1px solid #fca5a5; }
.pbi-ejemplo-head {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pbi-ejemplo-head.pbi-si { color: #166534; }
.pbi-ejemplo-head.pbi-no { color: #991b1b; }
.pbi-ejemplo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pbi-ejemplo-list li { font-size: 11.5px; line-height: 1.4; display: flex; align-items: flex-start; gap: 5px; }
.pbi-ejemplo-list li i { font-size: 11px; flex-shrink: 0; margin-top: 2px; }
.pbi-ejemplo-list.pbi-si li { color: #14532d; }
.pbi-ejemplo-list.pbi-si li i { color: #16a34a; }
.pbi-ejemplo-list.pbi-no li { color: #7f1d1d; }
.pbi-ejemplo-list.pbi-no li i { color: #dc2626; }

/* MODULOS */
.pbi-mod-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.pbi-mod-item {
  background: #F0F7FF;
  border: 1px solid #D5E8FA;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #003787;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.pbi-mod-item > i { color: #00AAF8; font-size: 16px; flex-shrink: 0; }
.pbi-mod-item span { font-weight: 400; color: #4F505C; font-size: 11.5px; display: block; margin-top: 2px; }

/* TIP / NOTA */
.pbi-tip, .pbi-nota {
  border-left: 3px solid #00AAF8;
  background: #EEF6FD;
  border-radius: 0 8px 8px 0;
  padding: 9px 13px;
  font-size: 11.5px;
  color: #1B1E35;
  line-height: 1.5;
  margin-bottom: 14px;
}
.pbi-tip i, .pbi-nota i { color: #00AAF8; vertical-align: middle; margin-right: 5px; font-size: 13px; }
.pbi-tip-ejemplo { margin-top: 5px; font-size: 11px; color: #4F505C; font-style: italic; }

/* PATY VS SOPORTE */
.pbi-two-col { display: flex; gap: 9px; margin-bottom: 14px; }
.pbi-col-box { flex: 1; border-radius: 8px; padding: 12px; }
.pbi-col-box.pbi-paty { background: #EEF6FD; border: 1px solid #D5E8FA; }
.pbi-col-box.pbi-soporte { background: #FFF8E1; border: 1px solid #F0C040; }
.pbi-col-head { font-size: 11.5px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.pbi-col-head.pbi-paty { color: #003787; }
.pbi-col-head.pbi-paty i { color: #00AAF8; font-size: 14px; }
.pbi-col-head.pbi-soporte { color: #7a5800; }
.pbi-col-head.pbi-soporte i { color: #b07d00; font-size: 14px; }
.pbi-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pbi-col-list li { font-size: 11.5px; color: #1B1E35; display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; }
.pbi-col-list li i { font-size: 11px; flex-shrink: 0; margin-top: 2px; }
.pbi-col-list.pbi-paty li i { color: #16a34a; }
.pbi-col-list.pbi-soporte li i { color: #b07d00; }

/* CHECKBOX T&C */
.pbi-tc-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #F0F7FF;
  border: 1px solid #D5E8FA;
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 8px;
  cursor: pointer;
}
.pbi-tc-box input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #00AAF8;
  margin-top: 1px;
  cursor: pointer;
}
.pbi-tc-box label { font-size: 12px; color: #1B1E35; line-height: 1.5; cursor: pointer; }
.pbi-tc-box label a { color: #00AAF8; text-decoration: underline; }

/* FOOTER */
.pbi-footer { padding: 12px 26px 18px; display: flex; align-items: center; justify-content: space-between; }
.pbi-dots { display: flex; gap: 6px; }
.pbi-dot { width: 7px; height: 7px; border-radius: 50%; background: #D5E8FA; cursor: pointer; transition: background 0.2s; }
.pbi-dot.pbi-active { background: #00AAF8; }
.pbi-nav-btns { display: flex; gap: 7px; align-items: center; }
.pbi-btn-nav {
  border: 1px solid #D7DBE6;
  background: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #4F505C;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pbi-btn-nav.pbi-primary {
  background: linear-gradient(135deg, #00AAF8 0%, #007BFF 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 170, 248, 0.28);
}
.pbi-btn-nav.pbi-primary:disabled { background: #b0d8f5; box-shadow: none; cursor: not-allowed; }
.pbi-btn-nav i { font-size: 12px; }

@media (max-width: 480px) {
  .pbi-ejemplo-row, .pbi-two-col { flex-direction: column; }
}