/* =========================================================
   COMPRE 2.0 — SISTEMA DE TEMAS (Basado en COMAI 3.0)
   ========================================================= */

/* ===== VARIABLES BASE (NEON DEFAULT) ===== */
:root {
  --accent: #00cc88;
  --accent-soft: rgba(0, 204, 136, 0.2);
  --accent-light: rgba(0, 204, 136, 0.1);
  --accent-hover: #00aa66;

  --bg-deep: #0a0c14;
  --bg-panel: #11141c;
  --bg-card: #161a22;

  --text-main: #eef3fc;
  --text-soft: #a6b0c8;
  --text-muted: #6f7a98;

  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

  --font-main: 'Poppins', sans-serif;
}

/* =========================================================
   TEMA 1 — NEON (DEFAULT)
   ========================================================= */
body[data-theme="neon"] {
  --accent: #00cc88;
  --accent-soft: rgba(0, 204, 136, 0.2);
  --accent-light: rgba(0, 204, 136, 0.1);
  --accent-hover: #00aa66;

  --bg-deep: #0a0c14;
  --bg-panel: #11141c;
  --bg-card: #161a22;

  --text-main: #eef3fc;
  --text-soft: #a6b0c8;
  --text-muted: #6f7a98;

  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   TEMA 2 — DARK PURPLE
   ========================================================= */
body[data-theme="dark-purple"] {
  --accent: #b300ff;
  --accent-soft: rgba(179, 0, 255, 0.2);
  --accent-light: rgba(179, 0, 255, 0.1);
  --accent-hover: #9900dd;

  --bg-deep: #0b0712;
  --bg-panel: #140a1f;
  --bg-card: #1b0f29;

  --text-main: #f3eaff;
  --text-soft: #c8b4e6;
  --text-muted: #8a7aa3;

  --border-soft: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   TEMA 3 — LIGHT SOFT (GOOGLE STYLE)
   ========================================================= */
body[data-theme="light-soft"] {
  --accent: #0088cc;
  --accent-soft: rgba(0, 136, 204, 0.15);
  --accent-light: rgba(0, 136, 204, 0.05);
  --accent-hover: #0066aa;

  --bg-deep: #f5f7fa;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;

  --text-main: #1a1e2a;
  --text-soft: #4a5568;
  --text-muted: #7a819c;

  --border-soft: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
}

/* =========================================================
   TEMA 4 — AMBER
   ========================================================= */
body[data-theme="amber"] {
  --accent: #ffaa00;
  --accent-soft: rgba(255, 170, 0, 0.2);
  --accent-light: rgba(255, 170, 0, 0.1);
  --accent-hover: #dd9900;

  --bg-deep: #0f0c06;
  --bg-panel: #1a150a;
  --bg-card: #221c0d;

  --text-main: #fff4d6;
  --text-soft: #e6d7b8;
  --text-muted: #b8a98a;

  --border-soft: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   ESTILOS BASE PARA COMPRE
   ========================================================= */

body {
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-main);
  transition: background 0.3s ease, color 0.2s ease;
}

.card,
header,
footer,
input,
button,
.search-box,
.weather-widget,
.modal-box {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  transition: background 0.3s ease, border 0.2s ease, color 0.2s ease;
}

.card:hover,
.search-box:focus-within,
.weather-widget:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
}

.btn,
button {
  background: var(--accent);
  color: var(--text-main);
  border: none;
  transition: 0.2s;
}

.btn:hover,
button:hover {
  background: var(--accent-hover);
}

input {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}

input::placeholder {
  color: var(--text-muted);
}

.modal {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-lg);
}

.weather-icon {
  filter: drop-shadow(0 0 6px var(--accent));
}.weather-widget { box-shadow: 0 0 12px var(--accent-soft); } .weather-widget { box-shadow: 0 0 12px var(--accent-soft); }
.search-box:hover { box-shadow: 0 0 12px var(--accent-soft); }
.weather-widget { box-shadow: 0 0 12px var(--accent-soft); }
.weather-widget, .menu-btn { position: fixed; z-index: 200; } .weather-widget, .menu-btn { position: fixed; z-index: 200; }
.weather-widget { box-shadow: 0 0 12px var(--accent-soft); }
.search-box:hover { box-shadow: 0 0 12px var(--accent-soft); } .search-box:hover { box-shadow: 0 0 12px var(--accent-soft); }
.weather-widget, .menu-btn { position: fixed; z-index: 200; }
.search-box:hover { box-shadow: 0 0 18px var(--accent-soft); }
.weather-widget { box-shadow: 0 0 18px var(--accent-soft); }