/* ===== Temas de marca PetX ===== */
/* marino = tema por defecto (no necesita override) */

[data-theme="oscuro"] {
  --azul-principal: #5B9BD9;
  --azul-degradado: #0B1220;
  --naranja-secundario: #FF8C42;
  --turquesa-apoyo: #2DD4BF;
  --fondo-claro: #0B1220;
  --superficie: #16213A;
  --texto-principal: #E5E7EB;
  --gris-neutro: #E09050;
}

[data-theme="oscuro"] .site-footer {
  background: var(--superficie);
}

/* ── Oscuro: logo swap ── */
.logo-oscuro { display: none; }
[data-theme="oscuro"] .logo-default { display: none; }
[data-theme="oscuro"] .logo-oscuro  { display: block; }

/* ── Oscuro: íconos del header ── */
[data-theme="oscuro"] .nav-toggle,
[data-theme="oscuro"] .theme-toggle,
[data-theme="oscuro"] .notif-btn {
  color: var(--texto-principal);
}
[data-theme="oscuro"] .nav-links a {
  color: var(--texto-principal);
}
[data-theme="oscuro"] .nav-dropdown-toggle {
  color: var(--texto-principal);
}
[data-theme="oscuro"] .btn-outline {
  color: var(--texto-principal);
  border-color: var(--gris-neutro);
}
[data-theme="oscuro"] .btn-outline:hover {
  background: var(--texto-principal);
  color: var(--superficie);
}

[data-theme="soleado"] {
  --azul-principal: #1E3A5F;
  --azul-degradado: #2E5A8C;
  --naranja-secundario: #FB8B24;
  --turquesa-apoyo: #F2A93C;
  --fondo-claro: #FFF6E9;
  --superficie: #FFFFFF;
  --texto-principal: #3A2A18;
  --gris-neutro: #F0D9AE;
  --like-color: #FFC93C;
}

[data-theme="armonia"] {
  --azul-principal: #1B4F4A;
  --azul-degradado: #14403B;
  --naranja-secundario: #E8895A;
  --turquesa-apoyo: #17A398;
  --fondo-claro: #EFF7F6;
  --superficie: #FFFFFF;
  --texto-principal: #1E3A36;
  --gris-neutro: #C9E4E0;
  --like-color: #22C55E;
}

[data-theme="pink"] {
  --azul-principal: #7C3A5D;
  --azul-degradado: #5C2A47;
  --naranja-secundario: #FF6B9D;
  --turquesa-apoyo: #9D4EDD;
  --fondo-claro: #FFF0F5;
  --superficie: #FFFFFF;
  --texto-principal: #3D1F2B;
  --gris-neutro: #F4C6D9;
}

/* ===== Selector de tema ===== */
.theme-switcher { position: relative; }

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--azul-principal);
  padding: 6px;
  display: flex;
  align-items: center;
}

.theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--superficie);
  border: 1px solid var(--gris-neutro);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 8px;
  min-width: 160px;
  z-index: 200;
}

.theme-menu.open { display: block; }

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-principal);
  cursor: pointer;
}

.theme-option:hover { background: var(--fondo-claro); }

.theme-option.active {
  background: var(--fondo-claro);
  color: var(--naranja-secundario);
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
}

.theme-dot.marino { background: linear-gradient(135deg, #163A5F, #FF7A00); }
.theme-dot.oscuro { background: linear-gradient(135deg, #0B1220, #5B9BD9); }
.theme-dot.soleado { background: linear-gradient(135deg, #FB8B24, #FFF6E9); }
.theme-dot.armonia { background: linear-gradient(135deg, #1B4F4A, #17A398); }
.theme-dot.pink { background: linear-gradient(135deg, #7C3A5D, #FF6B9D); }