@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background-color: transparent;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    width: 100%;
    height: 100%;
}

/* Fallback for when there is no class (using media query) */
/* @media (prefers-color-scheme: dark) {
    html, body {
    	background-color: transparent !important;
	}
} */

/*  Theme option row  */
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.theme-option:hover  { background: var(--bg-track); }
.theme-option.active { background: var(--bg-track); color: var(--bg-track-active); }
.theme-option span   { font-size: 12px; font-weight: 500; color: var(--text); }

/*  Color swatch dots  */
.swatch   { display: flex; gap: 3px; flex-shrink: 0; }
.swatch i { width: 10px; height: 10px; border-radius: 50%; display: block; }


/* --------------------------------------------
   1. CSS VARIABLES (THEMES)
   --------------------------------------------
   Dark theme (default) y variantes Rose/Midnight
   Variables organizadas por categoría: colors, spaci*/
:root {
  --bg-page: #0C0E1A; 
  --bg-card: #13162a; 
  --bg-card-rgb: rgba(19, 22, 42, 0.686); 
  --bg-track: #242A46; 
  --bg-track-active: #242A46;
  --bg-tabs: #0C0E1A; 
  --accent: #FBC48F;  
  --accent2: #7D6FB3;
  --text: #C5C8D3;    
  --text-muted: #7D6FB3; 
  --border: rgba(125,111,179,0.25);
  --dot-empty: #0C0E1A; 
  --ring-idle: #7D6FB3;
  --btn-play: #7D6FB3; 
  --btn-play-border: #7D6FB3; 
  --btn-play-h: #9588c8;
  --btn-pause: #4E2F53; 
  --btn-pause-h: #5e3d64;
  --btn-icon-b: #9588c8;
  --tab-active-bg: #242A46; 
  --tab-active-c: #FBC48F;
  /*Mood calendar*/
  --mc-background: #1d223f;
  --mc-calendar-empty: #13162A;
  --mc-calendar: #242A46;
  --mc-neutral: #242A46;
  --mc-amazing: #FBC48F;
  --mc-good: #7D6FB3;
  --mc-bad: #201939;
  --mc-terrible: #5e3d64;
  --mc-border1: #201939;
  --mc-border2: #7D6FB3;
  --mc-legend: #0C0E1A;
  --mc-text1: #7D6FB3;
  --mc-text2: #D3D8DB;
  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-shadown:rgb(211 211 211 / 80%)
}

.theme-notion {
  --bg-page: #000000; 
  --bg-card: #4E4E4E; 
  --bg-card-rgb: rgba(14, 14, 14, 0.605); 
  --bg-track: #000000; 
  --bg-track-active: #4E4E4E;
  --bg-tabs: #AEAEAE; 
  --accent: #e0e0e0;  
  --accent2: #999999;
  --text: #D3D8DB;    
  --text-muted: #D3D8DB; 
  --border: rgb(255 255 255 / 25%);
  --dot-empty: #4E4E4E; 
  --ring-idle: #D3D8DB;
  --btn-play: #353535; 
  --btn-play-border: #D3D8DB; 
  --btn-play-h: #AEAEAE;
  --btn-pause: #A7B6C2; 
  --btn-pause-h: #AEAEAE;
  --btn-icon-b: #D3D8DB;
  --tab-active-bg: #081019; 
  --tab-active-c: #D3D8DB;
  /*Mood calendar*/
  --mc-background: #cbcbcb;
  --mc-calendar-empty: #13162A;
  --mc-calendar: #242A46;
  --mc-neutral: #242A46;
  --mc-amazing: #ffffff;
  --mc-good: #aaaaab;
  --mc-bad: #64666f;
  --mc-terrible: #000000;
  --mc-border1: #081019;
  --mc-border2: #FFFFFF;
  --mc-legend: #161616;
  --mc-text1: #D3D8DB;
  --mc-text2: #D3D8DB;
  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-shadown:rgb(211 211 211 / 80%);
}

.theme-rose {
  --bg-page: #F5E9E2; 
  --bg-card: #E4B1AB; 
  --bg-card-rgb: #e4b1ab; 
  --bg-card-rgb: rgba(228, 177, 171, 0.729); 
  --bg-track: #F1D9D4;  
  --bg-track-active: #F1D9D4;
  --bg-tabs: #F5E9E2; 
  --accent: #E4B1AB;  
  --accent2: #D9C5A1;
  --text: #6b3a35;    
  --text-muted: #c4847d; 
  --border: rgba(228,177,171,0.4);
  --dot-empty: #F5E9E2; 
  --ring-idle: #D9C5A1;
  --btn-play: #c4847d; 
  --btn-play-border: #F1D9D4; 
  --btn-play-h: #D9C5A1;
  --btn-pause: #D9C5A1; 
  --btn-pause-h: #C9B48E;
  --btn-icon-b: #6B3A35;
  --tab-active-bg: #F1D9D4; 
  --tab-active-c: #6B3A35;
  /*Mood calendar*/
  --mc-background: #f5e2ef;
  --mc-calendar-empty: #13162A;
  --mc-calendar: #FFBECA;
  --mc-neutral: #FFBECA;
  --mc-amazing: #ca7797;
  --mc-good: #BE828E;
  --mc-bad: #7C4552;
  --mc-terrible: #4c0626;
  --mc-border1: #081019;
  --mc-border2: #FFFFFF;
  --mc-legend: #FFFFFF;
  --mc-text1: #C4847D;
  --mc-text2: #D3D8DB;
  /* Modals */
  --modal-overlay: rgba(255, 190, 202, 0.82);
  --modal-shadown:rgba(255, 255, 255, 0.8);
}


.theme-midnight {
  --bg-page: #1A1A1A; 
  --bg-card: #261018; 
  --bg-card-rgb: rgba(58, 22, 36, 0.586); 
  --bg-track: #3a1624; 
  --bg-track-active: #3a1624;
  --bg-tabs: #1A1A1A; 
  --accent: #B8A26D;  
  --accent2: #d9c5a1;
  --text: #d9c5a1;    
  --text-muted: #8a6a50; 
  --border: rgba(11, 11, 9, 0.25);
  --dot-empty: #1A1A1A; 
  --ring-idle: #B8A26D;
  --btn-play: #4B1F2F; 
  --btn-play-border: #B8A26D; 
  --btn-play-h: #612840;
  --btn-pause: #3a1624; 
  --btn-pause-h: #4d1f31;
  --btn-icon-b: #B8A26D;
  --tab-active-bg: #3a1624; 
  --tab-active-c: #B8A26D;
  /*Mood calendar*/
  --mc-background: #623546;
  --mc-calendar-empty: #13162A;
  --mc-calendar: #242A46;
  --mc-neutral: #3a1624;
  --mc-amazing: #a66980;
  --mc-good: #f7edd9;
  --mc-bad: #ffc697;
  --mc-terrible: #1A1A1A;
  --mc-border1: #081019;
  --mc-border2: #FFFFFF;
  --mc-legend: #161616;
  --mc-text1: #8a6a50;
  --mc-text2: #D3D8DB;
  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-shadown:rgb(211 211 211 / 80%)
}

.theme-ocean {
  --bg-page: #367eb9; 
  --bg-card: #233A52; 
  --bg-card-rgb: rgba(35, 58, 82, 0.77); 
  --bg-track: #6e7c88; 
  --bg-track-active: #233A52;
  --bg-tabs: #367eb9; 
  --accent: #BFD1D9;  
  --accent2: #E8DCCB;
  --text: #BFD1D9;    
  --text-muted: #BFD1D9; 
  --border: rgba(184,162,109,0.25);
  --dot-empty: #233A52; 
  --ring-idle: #BFD1D9;
  --btn-play: #367eb9; 
  --btn-play-border: #BFD1D9; 
  --btn-play-h: #367eb9;
  --btn-pause: #A7B6C2; 
  --btn-pause-h: #367eb9;
  --btn-icon-b: #BFD1D9;
  --tab-active-bg: #172a3e;
  --tab-active-c: #BFD1D9;
  /*Mood calendar*/
  --mc-background: #1b2660;
  --mc-calendar-empty: #13162A;
  --mc-calendar: #242A46;
  --mc-neutral: #242A46;
  --mc-amazing: #367eb9;
  --mc-good: #BFD1D9;
  --mc-bad: #233A52;
  --mc-terrible: #13162A;
  --mc-border1: #081019;
  --mc-border2: #FFFFFF;
  --mc-legend: #0C0E1A;
  --mc-text1: #0C0E1A;
  --mc-text2: #D3D8DB;
  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --modal-shadown:rgb(211 211 211 / 80%)
}

/* ─── Settings button & panel ────────────────────────────────── */
.btn-copydbid {
    background: var(--bg-track-active);
    padding: 7px;
    border: 2px solid var(--accent2);
    color: var(--accent);
    border-radius: 7px;
}


.btn-settings {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--btn-icon-b);
    background: transparent;
    color: var(--btn-icon-b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
  z-index: 20;
}
.btn-settings:hover { background: var(--bg-track); }
.btn-settings svg { transition: transform 0.4s; }
.btn-settings.open svg { transform: rotate(60deg); }
.btn-copydbid:hover { background: var(--btn-play); }

.settings-panel {
    position: absolute;
    top: 56px;
    right: 12px;
    left: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 30;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.settings-panel.open { display: flex; }

.settings-section { display: flex; flex-direction: column; gap: 8px; }

.settings-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 4px;
}

.settings-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}


/* ============================================
    TOAST NOTIFICATION
    ============================================ */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--accent);
    color: var(--bg-page);
    padding: 1rem 1.5rem;
    border-radius: 0.8rem;
    font-weight: 500;
    box-shadow: 0 8px 16px var(--modal-overlay);
    z-index: 2000;
    animation: slideInUp 0.3s ease;
}

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

.toast.remove {
    animation: slideOutDown 0.3s ease forwards;
}

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


.div-logo{
    display: flex; 
    align-items: center; 
    gap: 8px;
}