/**
 * PETMOVEL DEMO — Estilos Específicos da Demonstração
 * Brandev Tech | ChuaChua Pet Shop
 */

/* ============================================================
   LOADING SCREEN
   ============================================================ */

#loading-screen {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: linear-gradient(135deg, #0d1b2a 0%, #1a3a5c 40%, #0073b8 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   overflow: hidden;
}

/* Partículas de fundo */
#loading-screen::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(circle at 20% 80%, rgba(0, 115, 184, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(177, 61, 142, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(69, 137, 46, 0.05) 0%, transparent 70%);
   pointer-events: none;
}

/* Patas flutuantes no fundo */
#loading-screen::after {
   content: '🐾 🐾 🐾 🐾 🐾';
   position: absolute;
   top: 10%;
   left: -10%;
   font-size: 3rem;
   opacity: 0.04;
   transform: rotate(-15deg);
   letter-spacing: 3rem;
   pointer-events: none;
   animation: driftPaws 20s linear infinite;
}

@keyframes driftPaws {
   from { transform: rotate(-15deg) translateX(0); }
   to   { transform: rotate(-15deg) translateX(120vw); }
}

/* Logo */
.loading-logo {
   width: 110px;
   height: 110px;
   border-radius: 28px;
   background: rgba(255,255,255,0.08);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255,255,255,0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.2rem;
   box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
   animation: logoPulse 2.5s ease-in-out infinite;
   overflow: hidden;
}

.loading-logo img {
   width: 85px;
   height: 85px;
   object-fit: contain;
   border-radius: 20px;
}

@keyframes logoPulse {
   0%, 100% { transform: scale(1); box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); }
   50% { transform: scale(1.03); box-shadow: 0 8px 50px rgba(0,115,184,0.3), 0 0 0 1px rgba(255,255,255,0.1); }
}

/* Título */
.loading-title {
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-size: 1.9rem;
   font-weight: 800;
   color: #ffffff;
   letter-spacing: -0.5px;
   margin-bottom: 0.1rem;
   text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.loading-subtitle {
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-size: 0.85rem;
   color: rgba(255,255,255,0.5);
   font-weight: 400;
   letter-spacing: 0.5px;
   margin-bottom: 2.5rem;
   text-transform: uppercase;
}

/* Card das etapas */
.loading-card {
   background: rgba(255,255,255,0.06);
   backdrop-filter: blur(16px);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 20px;
   padding: 1.5rem 2rem;
   width: 100%;
   max-width: 380px;
   box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Etapas individuais */
.loading-step {
   display: flex;
   align-items: center;
   gap: 0.85rem;
   padding: 0.5rem 0;
   transition: all 0.3s ease;
   opacity: 0.35;
}

.loading-step.active {
   opacity: 1;
}

.loading-step.done {
   opacity: 0.8;
}

.step-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
   flex-shrink: 0;
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-step .step-icon {
   background: rgba(255,255,255,0.1);
   color: rgba(255,255,255,0.4);
}

.loading-step.active .step-icon {
   background: rgba(0,115,184,0.3);
   color: #4fc3f7;
   box-shadow: 0 0 12px rgba(0,115,184,0.5);
}

.loading-step.done .step-icon {
   background: rgba(69,137,46,0.3);
   color: #81c784;
   box-shadow: 0 0 10px rgba(69,137,46,0.3);
}

.step-text {
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-size: 0.88rem;
   font-weight: 500;
   color: rgba(255,255,255,0.6);
   transition: color 0.3s ease;
}

.loading-step.active .step-text {
   color: rgba(255,255,255,0.95);
}

.loading-step.done .step-text {
   color: rgba(255,255,255,0.7);
   text-decoration: none;
}

/* Spinner da etapa ativa */
.step-spinner {
   display: inline-block;
   width: 12px;
   height: 12px;
   border: 2px solid rgba(79,195,247,0.3);
   border-top-color: #4fc3f7;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   flex-shrink: 0;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

/* Barra de progresso */
.loading-progress-wrap {
   margin-top: 1.5rem;
   width: 100%;
   max-width: 380px;
}

.loading-progress-label {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.4rem;
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-size: 0.75rem;
   color: rgba(255,255,255,0.4);
}

.loading-progress-bar-bg {
   height: 4px;
   background: rgba(255,255,255,0.1);
   border-radius: 4px;
   overflow: hidden;
}

.loading-progress-bar {
   height: 100%;
   background: linear-gradient(90deg, #0073b8, #4fc3f7);
   border-radius: 4px;
   width: 0%;
   transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 0 8px rgba(79,195,247,0.6);
}

/* Texto rodapé loading */
.loading-footer {
   margin-top: 2.5rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-size: 0.72rem;
   color: rgba(255,255,255,0.25);
   letter-spacing: 0.3px;
}

.loading-footer img {
   width: 18px;
   opacity: 0.4;
}

/* ============================================================
   APP CONTAINER (pós-loading)
   ============================================================ */

#app-container {
   display: none;
}

/* ============================================================
   STATUS BADGES PERSONALIZADOS
   ============================================================ */

.badge-concluido {
   background-color: rgba(69, 137, 46, 0.15);
   color: #45892e;
   border: 1px solid rgba(69, 137, 46, 0.3);
}

.badge-em_andamento {
   background-color: rgba(0, 115, 184, 0.15);
   color: #0073b8;
   border: 1px solid rgba(0, 115, 184, 0.3);
}

.badge-aguardando {
   background-color: rgba(177, 61, 142, 0.1);
   color: #b13d8e;
   border: 1px solid rgba(177, 61, 142, 0.25);
}

.badge-vencido {
   background-color: rgba(208, 63, 49, 0.15);
   color: #d03f31;
   border: 1px solid rgba(208, 63, 49, 0.3);
}

.badge-ativo {
   background-color: rgba(69, 137, 46, 0.12);
   color: #45892e;
   border: 1px solid rgba(69, 137, 46, 0.3);
}

/* ============================================================
   MÓDULO DE CONTEÚDO
   ============================================================ */

.modulo-card {
   background: var(--bs-body-bg);
   border: 1px solid var(--bs-border-color);
   border-radius: 12px;
   transition: box-shadow 0.2s ease;
}

.modulo-card:hover {
   box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Cards de métricas */
.metric-card {
   border-radius: 16px;
   padding: 1.2rem 1rem;
   border: none;
   position: relative;
   overflow: hidden;
}

.metric-card::before {
   content: '';
   position: absolute;
   top: -30%;
   right: -20%;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: rgba(255,255,255,0.08);
}

.metric-value {
   font-size: 1.6rem;
   font-weight: 800;
   line-height: 1.1;
   color: white;
}

.metric-label {
   font-size: 0.75rem;
   color: rgba(255,255,255,0.7);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 0.2rem;
}

.metric-icon {
   font-size: 1.6rem;
   color: rgba(255,255,255,0.3);
   position: absolute;
   right: 1rem;
   top: 50%;
   transform: translateY(-50%);
}

/* ============================================================
   WHATSAPP ESTILO
   ============================================================ */

.whats-item {
   border-bottom: 1px solid var(--bs-border-color);
   padding: 0.75rem 0.5rem;
   cursor: pointer;
   transition: background 0.15s ease;
}

.whats-item:hover {
   background: rgba(var(--bs-primary-rgb), 0.04);
}

.whats-avatar {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: linear-gradient(135deg, #0073b8, #4fc3f7);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 700;
   font-size: 1rem;
   flex-shrink: 0;
}

.whats-badge {
   background: #45892e;
   color: white;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.7rem;
   font-weight: 700;
}

/* ============================================================
   ESTRELAS CSAT
   ============================================================ */

.star-rating {
   color: #ffc107;
   font-size: 0.9rem;
}

.star-rating .empty {
   color: var(--bs-border-color);
}

/* ============================================================
   TIMELINE DE LOGS
   ============================================================ */

.log-item {
   display: flex;
   gap: 1rem;
   padding: 0.6rem 0;
   border-bottom: 1px solid var(--bs-border-color);
   align-items: flex-start;
}

.log-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   margin-top: 4px;
   flex-shrink: 0;
}

.log-dot.info    { background: #0073b8; }
.log-dot.success { background: #45892e; }
.log-dot.warning { background: #b13d8e; }
.log-dot.danger  { background: #d03f31; }

/* ============================================================
   AGENDA SERVICOS
   ============================================================ */

.servico-row {
   border-left: 4px solid transparent;
   transition: all 0.2s ease;
   cursor: pointer;
}

.servico-row:hover {
   background: rgba(var(--bs-primary-rgb), 0.04);
}

.servico-row.status-concluido   { border-left-color: #45892e; }
.servico-row.status-em_andamento { border-left-color: #0073b8; }
.servico-row.status-aguardando   { border-left-color: #b13d8e; }

/* ============================================================
   BARRA DE PROGRESSO DOS PACOTES
   ============================================================ */

.pacote-progress {
   height: 6px;
   border-radius: 6px;
   background: var(--bs-border-color);
   overflow: hidden;
   margin-top: 0.4rem;
}

.pacote-progress-fill {
   height: 100%;
   border-radius: 6px;
   background: linear-gradient(90deg, #0073b8, #4fc3f7);
   transition: width 0.8s ease;
}

/* ============================================================
   DEMO BADGE (discreto, apenas no menu)
   ============================================================ */

.demo-badge {
   font-size: 0.6rem;
   background: rgba(177, 61, 142, 0.15);
   color: #b13d8e;
   border: 1px solid rgba(177, 61, 142, 0.3);
   border-radius: 6px;
   padding: 1px 5px;
   letter-spacing: 0.5px;
   font-weight: 700;
   vertical-align: middle;
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA DOS MÓDULOS
   ============================================================ */

.modulo-enter {
   animation: moduleSlideIn 0.25s ease-out;
}

@keyframes moduleSlideIn {
   from {
      opacity: 0;
      transform: translateY(12px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ============================================================
   RESPONSIVO — ajustes mobile
   ============================================================ */

@media (max-width: 576px) {
   .loading-title { font-size: 1.5rem; }
   .loading-card  { padding: 1.2rem 1.2rem; }
   .metric-value  { font-size: 1.3rem; }
}