@import 'tailwindcss';

/* Tokens de diseño NovaWoW (paleta oscura fantasía WotLK). */
@theme {
  --color-nw-bg: #140d08;
  --color-nw-panel: #241812;
  --color-nw-panel-2: #2c1e14;
  --color-nw-border: #4a3320;
  --color-nw-gold: #d79602;
  --color-nw-gold-light: #f0b93f;
  --color-nw-text: #e8dccb;
  --color-nw-muted: #b1997f;
}

:root {
  color-scheme: dark;
}

/* El fondo, la tipografía (FuturaEF-Book) y los estilos base del <body>
   los controla el tema real nw-ryu (novawow-style.css), cargado en el <head>
   del layout. No los redefinimos aquí para que el tema Django quede idéntico. */

/* El tema nw-ryu se diseñó para los defaults del navegador (igual que la web
   Django, que NO usa Tailwind). El preflight de Tailwind rompe dos cosas:
   1) box-sizing:border-box hace que la height fija de los inputs incluya el
      padding → campos aplastados. Volvemos a content-box SOLO en los inputs de
      texto que estiliza el tema (el navegador les da content-box por defecto,
      como la web Django sin Tailwind; los de .admin-form conservan border-box
      por su mayor especificidad). OJO: `select` NO va aquí — su default del
      navegador es border-box (40px); forzarlo a content-box lo agranda a 60px.
   2) border-collapse:collapse anula el border-spacing de las tablas del tema
      (middle-center-table, etc.) → filas pegadas. Volvemos a separate.
   Reglas SIN capa: ganan al preflight de Tailwind (que va en @layer base). */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'] {
  box-sizing: content-box;
}
table {
  border-collapse: separate;
}
/* 3) Tailwind pone img{display:block}, lo que apila verticalmente los iconos
   en línea (monedas de oro/plata/cobre, iconos inline del tema). El tema los
   usa inline (como la web Django). Volvemos a inline; las imágenes que deban
   ser bloque ya lo fijan por su propia clase (.img-med-icon, etc., mayor
   especificidad). */
img {
  display: inline;
}

/* Componentes reutilizables */
@layer components {
  .nw-btn {
    @apply inline-flex items-center justify-center rounded-md bg-nw-gold px-5 py-2.5 font-semibold text-[#1b120b] transition hover:bg-nw-gold-light;
  }
  .nw-btn-ghost {
    @apply inline-flex items-center justify-center rounded-md border border-nw-border px-5 py-2.5 font-semibold text-nw-text transition hover:border-nw-gold hover:text-nw-gold-light;
  }
  .nw-card {
    @apply rounded-xl border border-nw-border/70 bg-nw-panel/80 p-5 shadow-lg shadow-black/30 backdrop-blur;
  }
  .nw-heading {
    @apply bg-gradient-to-b from-nw-gold-light to-nw-gold bg-clip-text font-extrabold tracking-wide text-transparent;
  }
  .nw-input {
    @apply w-full rounded-md border border-nw-border bg-nw-panel-2 px-3 py-2 text-nw-text outline-none transition focus:border-nw-gold;
  }
}

/* Contenido HTML de noticias/foro */
.prose :where(a) {
  color: #7cc0f7;
}

/* Foro: textarea con el look del tema real (el tema nw-ryu no estiliza textarea base). */
textarea {
  width: 100%;
  background-color: #000;
  border: 2px solid #352e2b;
  color: #fff;
  font-family: 'FuturaEF-Book';
  font-size: 17px;
  padding: 8px;
  transition: 0.5s;
}
textarea:focus {
  border-color: #948474;
}

/* Foro: barra de herramientas del editor y paginación (colores del tema). */
.nw-tool-btn {
  border: 2px solid #352e2b;
  background: hsla(0, 0%, 100%, 0.05);
  color: #ebdec2;
  padding: 4px 10px;
  cursor: pointer;
  transition: 0.3s;
}
.nw-tool-btn:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
}
/* Paginación con el estilo de los botones del tema (borde + fondo tenue + hover).
   Los selectores :link/:visited elevan la especificidad para ganar a las reglas
   `a`/`a:visited` del tema (que si no dejan los enlaces visitados en azul). */
.nw-page-link {
  display: inline-block;
  min-width: 42px;
  padding: 9px 14px;
  margin: 0 3px;
  border: 2px solid #352e2b;
  background: hsla(0, 0%, 100%, 0.05);
  text-align: center;
  transition: 0.3s;
}
.nw-page-link:link,
.nw-page-link:visited {
  color: #ebdec2;
}
.nw-page-link:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
}
.nw-page-current,
.nw-page-current:link,
.nw-page-current:visited {
  border-color: #b17c02;
  color: #d79602;
  background: hsla(40, 90%, 45%, 0.12);
}
/* Contenido de posts del foro */
.post-content {
  line-height: 22px;
}
.post-content a {
  color: #2471a9;
}

/* Panel de admin: campos a ancho completo dentro de la caja del formulario. */
.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Listas dentro de las cajas de contenido (el tema no las estiliza y el
   preflight de Tailwind quita los bullets; los devolvemos como en Django). */
.body-box-content ul {
  list-style: disc;
  padding-left: 22px;
  margin: 8px 0;
}
.body-box-content li {
  line-height: 22px;
}

/* Declaración de cookies: tablas y botones de consentimiento. */
.uw-cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 15px;
}
.uw-cookie-table th,
.uw-cookie-table td {
  border: 1px solid #352e2b;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.uw-cookie-table th {
  background: hsla(0, 0%, 100%, 0.05);
  color: #ebdec2;
  text-transform: uppercase;
  font-size: 13px;
}
.uw-cookie-table td {
  color: #b1997f;
}
.uw-cookie-table a {
  color: #2471a9;
}
.uw-consent-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}
.btn-uw {
  border: 2px solid #352e2b;
  background: hsla(0, 0%, 100%, 0.05);
  color: #ebdec2;
  padding: 10px 18px;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.3s;
}
.btn-uw:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
}
.btn-uw-secondary {
  border-color: #5c2b2b;
  color: #d98c8c;
}
.btn-uw-secondary:hover {
  background: hsla(0, 60%, 30%, 0.15);
  color: #fff;
}

/* Banner de consentimiento de cookies (fijo abajo). */
.uw-cookie-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: #140d08;
  border-top: 2px solid #4a3320;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55);
}
.uw-cookie-text {
  flex: 1 1 420px;
}
.uw-cookie-text h3 {
  color: #d79602;
  margin-bottom: 6px;
}
.uw-cookie-text p {
  color: #b1997f;
  font-size: 14px;
  line-height: 20px;
}
.uw-cookie-link {
  display: inline-block;
  margin-top: 6px;
  color: #2471a9;
}
.uw-cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.uw-cookie-btn {
  border: 2px solid #352e2b;
  background: hsla(0, 0%, 100%, 0.05);
  color: #ebdec2;
  padding: 9px 16px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.3s;
}
.uw-cookie-btn:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
}
.uw-cookie-btn-accept {
  border-color: #b17c02;
  color: #f0b93f;
}
.uw-cookie-btn-accept:hover {
  background: hsla(40, 90%, 45%, 0.15);
  color: #fff;
}
.uw-cookie-btn-reject {
  border-color: #5c2b2b;
  color: #d98c8c;
}
.uw-cookie-btn-save {
  border-color: #b17c02;
  color: #f0b93f;
}
.uw-cookie-btn-save:hover {
  background: hsla(40, 90%, 45%, 0.15);
  color: #fff;
}

/* Panel «Personalizar» del banner (checkboxes por categoría). */
.uw-cookie-details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #352e2b;
}
.uw-cookie-category {
  margin-bottom: 10px;
}
.uw-cookie-category label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.uw-cookie-category input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: #d79602;
  cursor: pointer;
}
.uw-cookie-category input[type='checkbox']:disabled {
  cursor: default;
}
.uw-cookie-cat-name {
  color: #ebdec2;
  font-size: 15px;
}
.uw-cookie-category p {
  color: #b1997f;
  font-size: 13px;
  margin: 2px 0 0 24px;
  line-height: 18px;
}
.uw-cookie-actions-detail {
  margin-top: 8px;
}

/* Panel «Tu estado de consentimiento» en /cookies (datos de la API de Zaraz). */
.uw-consent-status {
  border: 1px solid #352e2b;
  padding: 12px 14px;
  margin: 12px 0;
}
.uw-consent-status .uw-consent-source {
  font-size: 13px;
  color: #7e8d09;
  margin-bottom: 8px;
}
.uw-consent-status ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.uw-consent-status li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid #241812;
}
.uw-consent-status li:last-child {
  border-bottom: 0;
}
.uw-consent-on {
  color: #6aa84f;
}
.uw-consent-off {
  color: #cc5b5b;
}
.uw-consent-always {
  color: #b1997f;
}

/* Selector de cuenta inline (dentro de «Nombre de la cuenta») + botón «+». */
.account-select {
  width: auto;
  min-width: 92px;
  height: auto;
  padding: 2px 8px;
  margin: 0 0 0 4px;
  font-size: 17px;
  vertical-align: middle;
}
.add-account-btn {
  height: auto;
  padding: 1px 9px;
  margin: 0 0 0 6px;
  font-size: 17px;
  line-height: 1.4;
  vertical-align: middle;
  border: 2px solid #352e2b;
  background: hsla(0, 0%, 100%, 0.05);
  color: #ebdec2;
  cursor: pointer;
  transition: 0.3s;
}
.add-account-btn:hover {
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
}
/* El formulario de añadir cuenta sale en bloque, debajo del nombre. */
.add-account-box {
  display: block;
  margin-top: 6px;
}
.add-account-input {
  min-width: 150px;
}
.add-account-msg {
  display: block;
  margin-top: 4px;
}

/* Colores de calidad de objeto (enlaces de recompensas RAF, etc.). */
.q0 { color: #9d9d9d; }
.q1 { color: #ffffff; }
.q2 { color: #1eff00; }
.q3 { color: #0070dd; }
.q4 { color: #a335ee; }
.q5 { color: #ff8000; }

/* Colores de clase de WoW (nombre de personaje) */
.class-warrior { color: #c79c6e; }
.class-paladin { color: #f58cba; }
.class-hunter { color: #abd473; }
.class-rogue { color: #fff569; }
.class-priest { color: #ffffff; }
.class-death-knight { color: #c41f3b; }
.class-shaman { color: #0070de; }
.class-mage { color: #69ccf0; }
.class-warlock { color: #9482c9; }
.class-druid { color: #ff7d0a; }
.class-unknown { color: #f0b100; }

/* Logos en línea de las pasarelas de pago (lista de métodos en /d-points) */
.pay-inline-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin: 0 2px;
}

/* Pasarelas de pago en /d-points: layout e iconos de los botones de método
   (portado del tema original; los SVG no tienen tamaño intrínseco, así que se
   dimensionan aquí para que el icono quede en línea con el texto como PayPal). */
.dnt-sidebar.dnt-methods {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}
.dnt-sidebar.dnt-methods .dnt-button-2 {
  flex: 1 1 auto;
  padding: 0 18px;
}
.dnt-sidebar.dnt-methods .dnt-button-2 img {
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}

/* ==== Verificación en 2 pasos (/security-2falogin) ==== */
.twofa-login-info { display: block; }
.twofa-login-preview {
  float: right;
  max-width: 370px;
  margin-left: 24px;
  margin-bottom: 8px;
  height: auto;
  border: 2px solid #352e2b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.google-play-logo { height: 40px; width: 140px; vertical-align: middle; }
.apple-store-logo { height: 40px; width: 120px; vertical-align: middle; }
.toggle-password, .toggle-token { cursor: pointer; margin-left: -28px; color: #b1997f; transition: .3s; }
.toggle-password:hover, .toggle-token:hover { color: #fff; }
.copy-secret-container { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
#secret-key { width: 240px; text-align: center; }
.copy-btn { cursor: pointer; }
#qr-code { display: block; margin: 0 auto; max-width: 220px; height: auto; background: #fff; padding: 8px; border-radius: 6px; }
@media screen and (max-width: 1024px) {
  .twofa-login-info { display: flex; flex-direction: column-reverse; align-items: center; }
  .twofa-login-preview { float: none; display: block; clear: both; margin: 10px auto 8px auto; max-width: 90vw; }
}
