/* ================================================
   Theme: Claro Red
   Include this file AFTER style.css
   ================================================ */

/* ---- Google Font ---- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');

body, button, input, select, textarea { font-family: "Nunito", sans-serif; }

/* ---- Brand variables ---- */
:root {
  /* Brand */
  --primary:   218, 42, 28;
  --secondary: 139, 26, 20;

  /* Mobile — variáveis de cor do pipetrack.css */
  --accent:         #da2a1c;
  --accent-rgb:     218, 42, 28;
  --accent-shade:   #b52318;
  --accent-soft:    #fdecea;

  /* Mobile backgrounds/borders (sobrescreve o azul-lavanda padrão) */
  --bg:             #fcecea;
  --surface:        #ffffff;
  --surface-sunken: #f8e0de;
  --border:         #edbbba;
  --border-strong:  #d9918d;
  --text-secondary: #7a5a5a;
  --text-tertiary:  #b08888;

  /* Status */
  --success: 10, 185, 100;
  --danger:  225, 78, 90;
  --warning: 249, 193, 35;
  --info:    65, 150, 250;
  --light:   200, 185, 210;
  --dark:    40, 35, 45;

  /* Text & Backgrounds */
  --font-color:       #3a0604;
  --body-color:       #fff8f7;
  --bodybg-color:     #fcecea;
  --font-light-color: #b85850;
  --light-gray:       #f8e0de;
  --border_color:     #edbbba;

  /* Typography */
  --font-size:     15px;
  --p-font-size:   15px;
  --btn-font-size: 16px;
  --h1-font-size:  2.9rem;
  --h2-font-size:  2.25rem;
  --h3-font-size:  1.95rem;
  --h4-font-size:  1.7rem;
  --h5-font-size:  1.35rem;
  --h6-font-size:  1.2rem;
  --p-line-height: 1.6;

  /* Layout */
  --app-border-radius: 0.6rem;
  --bs-border-radius:  0.6rem;
  --sidebar-width:     18rem;

  /* Animated border — usa a cor primária do tema */
  --bd-anim-color:   rgba(var(--primary), 1);
  --bd-custom-color: rgba(var(--primary), 1);

  /* Moving gradient borders */
  --bd-mv-c1: rgba(var(--primary), 1);
  --bd-mv-c2: rgba(var(--secondary), 1);
  --bd-mv-c3: rgba(var(--primary), 0.6);
  --bd-mv-c4: rgba(var(--secondary), 0.6);
}

/* ---- Card Background ---- */
.card { background-color: #ffffff !important; }

/* ================================================
   Card Border Classes
   ================================================ */
.card-bd-primary  { border: 2px solid rgba(var(--primary),1) !important; }
.card-bd-success  { border: 2px solid rgba(var(--success),1) !important; }
.card-bd-danger   { border: 2px solid rgba(var(--danger),1) !important; }
.card-bd-warning  { border: 2px solid rgba(var(--warning),1) !important; }
.card-bd-info     { border: 2px solid rgba(var(--info),1) !important; }
.card-bd-custom   { border: 2px solid var(--bd-custom-color) !important; }
.card-bd-left-primary { border-left: 4px solid rgba(var(--primary),1) !important; }
.card-bd-left-success  { border-left: 4px solid rgba(var(--success),1) !important; }
.card-bd-left-danger   { border-left: 4px solid rgba(var(--danger),1) !important; }
.card-bd-left-warning  { border-left: 4px solid rgba(var(--warning),1) !important; }

/* Gradient border — vermelho → laranja */
.card-bd-gradient {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    linear-gradient(135deg, rgba(var(--primary),1) 0%, rgba(var(--secondary),0.7) 50%, rgba(var(--warning),1) 100%) border-box;
}

/* Animated borders */
@keyframes bdRainbow {
  0%   { border-color: var(--bd-anim-color) }
  25%  { border-color: rgba(var(--success),1) }
  50%  { border-color: rgba(var(--warning),1) }
  75%  { border-color: rgba(var(--danger),1) }
  100% { border-color: var(--bd-anim-color) }
}
.card-bd-rainbow { border: 2px solid var(--bd-anim-color) !important; animation: bdRainbow 3s linear infinite; }

@keyframes bdGlow {
  0%, 100% { box-shadow: 0 0 4px var(--bd-anim-color); border-color: var(--bd-anim-color) }
  50%       { box-shadow: 0 0 18px var(--bd-anim-color), 0 0 36px var(--bd-anim-color); border-color: var(--bd-anim-color) }
}
.card-bd-glow { border: 2px solid var(--bd-anim-color) !important; animation: bdGlow 2s ease-in-out infinite; }

@keyframes bdPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--bd-anim-color) }
  50%       { box-shadow: 0 0 0 7px transparent }
}
.card-bd-pulse { border: 2px solid var(--bd-anim-color) !important; animation: bdPulse 2s ease infinite; }
.card-bd-dashed { border: 2px dashed var(--bd-anim-color) !important; animation: bdRainbow 6s linear infinite; }

@property --bd-run-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes bdRun { to { --bd-run-angle: 360deg; } }

.card-bd-run {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), transparent 0deg, var(--bd-anim-color) 60deg, transparent 90deg) border-box;
  animation: bdRun 2s linear infinite;
}
.card-bd-snake {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), transparent 0deg, var(--bd-anim-color) 160deg, transparent 200deg) border-box;
  animation: bdRun 3s linear infinite;
}
.card-bd-chase {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), transparent 0deg, var(--bd-anim-color) 55deg, transparent 90deg, transparent 180deg, var(--bd-anim-color) 235deg, transparent 270deg) border-box;
  animation: bdRun 2s linear infinite;
}
.card-bd-sweep {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), var(--bd-anim-color) 0deg, transparent 90deg, transparent 270deg, var(--bd-anim-color) 360deg) border-box;
  animation: bdRun 4s linear infinite;
}

.card-bd-grad-spin {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), rgba(var(--primary),1) 0deg, rgba(var(--secondary),1) 90deg, rgba(var(--primary),1) 180deg, rgba(var(--secondary),1) 270deg, rgba(var(--primary),1) 360deg) border-box;
  animation: bdRun 3s linear infinite;
}
.card-bd-grad-run {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), transparent 0deg, rgba(var(--primary),1) 30deg, rgba(var(--secondary),1) 60deg, rgba(var(--primary),1) 90deg, transparent 120deg) border-box;
  animation: bdRun 2s linear infinite;
}
.card-bd-grad-chase {
  border: 3px solid transparent !important;
  background:
    linear-gradient(var(--body-color), var(--body-color)) padding-box,
    conic-gradient(from var(--bd-run-angle), transparent 0deg, rgba(var(--primary),1) 30deg, rgba(var(--secondary),1) 55deg, transparent 80deg, transparent 180deg, rgba(var(--primary),1) 210deg, rgba(var(--secondary),1) 235deg, transparent 260deg) border-box;
  animation: bdRun 2s linear infinite;
}

.bg-custom-gradient {
  background: linear-gradient(135deg, rgba(var(--primary),1) 0%, rgba(var(--secondary),0.8) 50%, rgba(var(--warning),1) 100%) !important;
}

/* ================================================
   Liquid Glass
   ================================================ */
:root { --glass-blur: 15px; --glass-opacity: 0.18; --glass-border-opacity: 0.35; }
.card-glass {
  background: rgba(255,255,255,var(--glass-opacity,.18)) !important;
  backdrop-filter: blur(var(--glass-blur,15px)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur,15px)) saturate(1.8);
  border: 1px solid rgba(255,255,255,var(--glass-border-opacity,.35)) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ================================================
   Fix: hardcoded teal colors herdados do template
   ================================================ */

/* Substitui o login-bg.png (onda teal) por gradiente temático */
.sign-in-bg .main-container .main-content-box {
  background-image: linear-gradient(145deg, rgba(var(--primary), 0.10) 0%, rgba(var(--secondary), 0.22) 100%) !important;
}

/* Tinge o fundo externo da tela de login com a cor primária */
.sign-in-bg {
  background-color: rgba(var(--primary), 0.75);
  background-blend-mode: multiply;
}

/* Divisor dentro do formulário de login */
.form-content-box .form-container .app-divider-v p {
  background-color: rgba(var(--primary), 1) !important;
}

/* Grade de pontos usada no service-trial-card */
.service-trial-card .card-body:before {
  background-image:
    linear-gradient(rgba(var(--primary), 0.15) 1px, transparent 1px),
    linear-gradient(to right, rgba(var(--primary), 0.15) 1px, transparent 1px) !important;
}