/* =========================================
   SISTEMA DE TEMAS
========================================= */


/* =========================================
   PREVIEW DOS TEMAS
========================================= */

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  padding: 0 20px 18px;
}

.theme-preview-option {
  padding: 10px;
  min-height: auto;
}

.theme-preview-card {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}

.theme-preview-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: white;
  margin-bottom: 6px;
  opacity: .95;
}

.theme-preview-date {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  color: white;
}

.theme-preview-original,
.theme-preview-default {
  background: linear-gradient(135deg, var(--rosa), #F05A7E);
}

.theme-preview-original::before,
.theme-preview-default::before {
  content: '';
  position: absolute;
  right: -24px;
  top: -24px;
  width: 90px;
  height: 90px;
  background: rgba(255,255,255,.14);
  border-radius: 50%;
}

.theme-preview-graffiti {
  background-image: url('/themes/graffiti/card-main.webp');
  background-size: cover;
  background-position: center;
}

.theme-preview-streetInk {
  background-image: url('/themes/streetInk/card-main.webp');
  background-size: cover;
  background-position: center center;
}


/* =========================================
   VARIÁVEIS DOS TEMAS SIMPLES
========================================= */

body.theme-dark {
  --rosa: #9B7CFF;
  --rosa-soft: #241F38;
  --rosa-dark: #7C5CDB;
  --lilás: #B89CFF;
  --lilás-soft: #26203A;
  --verde: #65D6A4;
  --verde-soft: #16362A;
  --azul: #6BB8FF;
  --azul-soft: #172C42;
  --amber: #FFD166;
  --amber-soft: #3A3018;
  --branco: #181821;
  --bg: #101018;
  --bg2: #20202A;
  --text: #F6F2FF;
  --text2: #C8BEDA;
  --text3: #8F86A4;
  --border: rgba(255,255,255,0.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
}

body.theme-blue {
  --rosa: #3B82F6;
  --rosa-soft: #E5F1FF;
  --rosa-dark: #1D4ED8;
  --lilás: #60A5FA;
  --lilás-soft: #EAF3FF;
  --verde: #10B981;
  --verde-soft: #DDF8EC;
  --azul: #3B82F6;
  --azul-soft: #E5F1FF;
  --amber: #F59E0B;
  --amber-soft: #FFF4D9;
  --branco: #FFFFFF;
  --bg: #F4F8FD;
  --bg2: #EAF0F8;
  --text: #132033;
  --text2: #52657D;
  --text3: #91A1B5;
  --border: rgba(19,32,51,0.1);
}

body.theme-green {
  --rosa: #2EAD73;
  --rosa-soft: #E1F6EA;
  --rosa-dark: #178052;
  --lilás: #8DD7B4;
  --lilás-soft: #EAF9F1;
  --verde: #2EAD73;
  --verde-soft: #E1F6EA;
  --azul: #59B6D8;
  --azul-soft: #E3F5FA;
  --amber: #E8B34B;
  --amber-soft: #FFF4D8;
  --branco: #FFFFFF;
  --bg: #F5FBF7;
  --bg2: #EAF4EE;
  --text: #143325;
  --text2: #5B7568;
  --text3: #9BAEA5;
  --border: rgba(20,51,37,0.1);
}

body.theme-beige {
  --rosa: #C9885B;
  --rosa-soft: #F7E8DC;
  --rosa-dark: #9B5F38;
  --lilás: #D4B6A3;
  --lilás-soft: #F4EAE3;
  --verde: #7FA36A;
  --verde-soft: #EAF3E4;
  --azul: #7DA2B8;
  --azul-soft: #E6F0F4;
  --amber: #D8A94A;
  --amber-soft: #F8EED4;
  --branco: #FFFDF8;
  --bg: #F8F1E8;
  --bg2: #EFE3D5;
  --text: #33251C;
  --text2: #7B6858;
  --text3: #B2A194;
  --border: rgba(51,37,28,0.1);
}

body.theme-kids {
  --rosa: #FF5FA2;
  --rosa-soft: #FFE4F0;
  --rosa-dark: #E03E84;
  --lilás: #8B7CFF;
  --lilás-soft: #ECE9FF;
  --verde: #36CFA2;
  --verde-soft: #DDFBF3;
  --azul: #39BDF8;
  --azul-soft: #E2F7FF;
  --amber: #FFD166;
  --amber-soft: #FFF5CE;
  --branco: #FFFFFF;
  --bg: #FFF8FC;
  --bg2: #F2ECFF;
  --text: #2F2440;
  --text2: #776887;
  --text3: #B8A9C8;
  --border: rgba(47,36,64,0.1);
}


/* =========================================
   ÍCONES POR TEMA
========================================= */

.theme-menu-icon {
  display: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
  margin: 0 auto;
}

.nav-emoji {
  display: inline-block;
}

body.theme-graffiti .nav-emoji,
body.theme-streetInk .nav-emoji {
  display: none;
}

body.theme-graffiti .theme-menu-icon,
body.theme-streetInk .theme-menu-icon {
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.28));
}

body.theme-graffiti .stat-theme-icon,
body.theme-streetInk .stat-theme-icon {
  width: 34px;
  height: 34px;
}

body.theme-graffiti .stat-icon,
body.theme-streetInk .stat-icon {
  background: transparent !important;
}


/* =========================================
   GRAFFITI
========================================= */

body.theme-graffiti {
  --theme-main-font: 'Bangers', sans-serif;
  --theme-primary: #ff0088;
  --theme-secondary: #00b7ff;
  --theme-card-bg: url('/themes/graffiti/card-main.webp');
}


/* =========================================
   STREETINK
========================================= */

body.theme-streetInk {
  --theme-main-font: 'Bangers', sans-serif;
  --theme-primary: #ff4d00;
  --theme-secondary: #00c8ff;
  --theme-card-bg: url('/themes/streetInk/card-main.webp');
}


/* =========================================
   GRAFFITI + STREETINK — CARD PRINCIPAL
========================================= */

body.theme-graffiti .today-banner,
body.theme-streetInk .today-banner {
  background-image: var(--theme-card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 190px;
  height: 190px;
  padding: 0;

  overflow: hidden;
  position: relative;
}

body.theme-graffiti .today-banner::after,
body.theme-streetInk .today-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.10) 45%,
      rgba(0,0,0,.62) 100%
    );
  z-index: 1;
  pointer-events: none;
}

body.theme-graffiti .today-banner-date,
body.theme-streetInk .today-banner-date {
  position: absolute;

  left: 18px;
  top: 14px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  font-family: 'Bangers', sans-serif;
  color: #ffffff;

  font-size: 52px;
  font-weight: 900;
  line-height: .9;

  text-transform: uppercase;

  -webkit-text-stroke: 2px #000;

  text-shadow:
    4px 4px 0 #000,
    0 8px 18px rgba(0,0,0,.65);

  z-index: 3;

  max-width: 80%;
}

body.theme-graffiti .today-banner-count,
body.theme-streetInk .today-banner-count {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);

  padding: 8px 16px;
  border-radius: 16px;

  background: rgba(0,0,0,.78);
  border: 2px solid rgba(255,255,255,.18);
  color: #ffffff;

  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;

  backdrop-filter: blur(6px);

  z-index: 4;
}

body.theme-graffiti .today-banner-btn,
body.theme-streetInk .today-banner-btn {
  display: none;

  background:
    linear-gradient(
      135deg,
      var(--theme-primary),
      var(--theme-secondary)
    );

  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.25);
  color: white;
  font-family: var(--theme-main-font);
  font-size: 16px;
  padding: 10px 16px;
  width: fit-content;
  margin-top: auto;
}

body.theme-graffiti .today-banner-label,
body.theme-streetInk .today-banner-label {
  display: none !important;
}


/* =========================================
   GRAFFITI + STREETINK — BOTÃO VOZ
========================================= */

body.theme-graffiti .voice-btn,
body.theme-streetInk .voice-btn {
  position: relative;
  overflow: visible !important;

  min-height: 42px !important;
  padding: 8px 16px !important;
  margin-left: 48px;

  border-radius: 18px !important;

  background: linear-gradient(135deg,#ff1744 0%,#ff0088 48%,#ff7a00 100%) !important;
  box-shadow: 0 8px 18px rgba(255,0,80,.26) !important;

  font-size: 14px !important;
  gap: 8px;
  justify-content: center;
}

body.theme-graffiti .mic-theme-icon,
body.theme-streetInk .mic-theme-icon {
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.35));
}

body.theme-graffiti .voice-theme-icon-wrap,
body.theme-streetInk .voice-theme-icon-wrap {
  position: absolute;
  left: -52px;
  top: 50%;
  transform: translateY(-50%);

  background: transparent !important;
  box-shadow: none !important;
  border: none !important;

  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.theme-graffiti .voice-btn .nav-emoji,
body.theme-streetInk .voice-btn .nav-emoji {
  display: none !important;
}

body.theme-graffiti .voice-pulse,
body.theme-streetInk .voice-pulse {
  background: rgba(255,255,255,.85) !important;
}


/* =========================================
   GRAFFITI + STREETINK — BOTÃO ADD
========================================= */

body.theme-graffiti .nav-add,
body.theme-streetInk .nav-add {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.theme-graffiti .plus-theme-icon,
body.theme-streetInk .plus-theme-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.28));
}


/* =========================================
   GRAFFITI + STREETINK — TOP ICONS
========================================= */

.top-theme-icon {
  display: none;
}

body.theme-graffiti .top-theme-icon,
body.theme-streetInk .top-theme-icon {
  display: block;
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.30));
}

body.theme-graffiti .header-btn .nav-emoji,
body.theme-streetInk .header-btn .nav-emoji {
  display: none;
}

body.theme-graffiti .header-btn,
body.theme-streetInk .header-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;

  width: 58px;
  height: 58px;
  border-radius: 0;
  padding: 0;
}


/* =========================================
   GRAFFITI + STREETINK — MENU LATERAL
========================================= */

body.theme-graffiti .bottom-nav,
body.theme-streetInk .bottom-nav {
  width: 80px;
  padding-left: 5px;
  padding-right: 5px;
}

body.theme-graffiti .nav-item,
body.theme-streetInk .nav-item {
  width: 64px;
  min-height: 64px;
  flex-basis: 64px;
  gap: 2px;
  padding: 4px 2px;
}

body.theme-graffiti .nav-icon,
body.theme-streetInk .nav-icon {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.theme-graffiti .nav-item .theme-menu-icon,
body.theme-streetInk .nav-item .theme-menu-icon {
  width: 34px;
  height: 34px;
}

body.theme-graffiti .nav-label,
body.theme-streetInk .nav-label {
  width: 62px;
  font-size: 9px;
  line-height: 1.05;
  font-weight: 900;
  overflow: visible;
  white-space: normal;
}


/* =========================================
   NEON
========================================= */

body.theme-neon {
  --theme-main-font: 'Orbitron', sans-serif;
  --theme-primary: #00ffff;
  --theme-secondary: #7a00ff;
  --theme-card-bg: url('/themes/neon/card-main.webp');
}

body.theme-neon .today-banner {
  background-image: var(--theme-card-bg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 190px;
  max-height: 190px;
  height: 190px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;

  position: relative;
}

body.theme-neon .today-banner-date {
  font-family: var(--theme-main-font);

  color: #ffffff;

  text-shadow:
    0 0 8px #00ffff,
    0 0 18px #00ffff;
}

body.theme-neon .today-banner-btn {
  background:
    linear-gradient(
      135deg,
      #00ffff,
      #7a00ff
    );

  color: white;

  border-radius: 22px;
}


/* =========================================
   KIDS
========================================= */

body.theme-kids {
  --theme-main-font: 'Fredoka', sans-serif;
  --theme-primary: #ff5fa2;
  --theme-secondary: #ffd166;
  --theme-card-bg: url('/themes/kids/card-main.webp');
}

body.theme-kids .today-banner {
  background-image: var(--theme-card-bg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 190px;
  max-height: 190px;
  height: 190px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;

  position: relative;
}

body.theme-kids .today-banner-date {
  font-family: var(--theme-main-font);

  color: white;

  text-shadow:
    2px 2px 0 rgba(0,0,0,.3);
}

body.theme-kids .today-banner-btn {
  background:
    linear-gradient(
      135deg,
      #ff5fa2,
      #ffd166
    );

  color: white;

  border-radius: 999px;
}