/* ════════════════════════════════════════════════════
   STYLE_NEW.CSS — IdrojetBot
   Versió neta i unificada (2025)
   Autor: Jordi Boixader · idrojet.boixader.com
════════════════════════════════════════════════════ */

/* ──────────────────────────────
   1. ESTRUCTURA GLOBAL
──────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Verdana, sans-serif;
  background: #f8f9fa;
  color: #191a19;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Contenidors principals */
.container {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 1.5rem;
  text-align: center;
}

/* Targetes */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 2rem;
  margin: 1rem auto;
  max-width: 900px;
}

/* Textos generals */
h1, h2, h3, h4, h5 {
  margin: 0.8em 0;
}
p {
  margin: 0.4em 0;
}

/* ──────────────────────────────
   2. BARRA SUPERIOR (HEADER)
──────────────────────────────── */
header.hdr {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  width: 100%;
  height: 56px;
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  padding: 0 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 10;
}

/* Icones esquerra/dreta */
.hdr-left, .hdr-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Títol i logo */
.title-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.title-group img {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}
.title-group span {
  font-size: 1.2rem;
  font-weight: bold;
}

header.hdr {
  padding: 0 20px; /* 🔹 mateix espai lateral que al dashboard_info.php */
}

/* ─── Botons de la barra superior (⬅️ i ℹ️) ─── */
.btn-back-top,
.info-btn {
  font-size: 1.5rem;
  color: #6A9915;
  text-decoration: none;
  background: none;
  border: none;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: transform 0.15s ease;
  padding: 0;
  margin: 0;
}

.btn-back-top:hover,
.info-btn:hover {
  transform: scale(1.1);
}

/* Força la mateixa alçada vertical a la barra */
.hdr-left,
.hdr-right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


/* ──────────────────────────────
   3. TAULES GENERALS
──────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  padding: 6px 8px;
  border-bottom: 1px solid #ddd;
  font-size: 0.9rem;
  text-align: center;
}
th {
  background: #f0f0f0;
  font-weight: bold;
}
td.right, th.right {
  text-align: right;
}
tr.total {
  background: #f0f0f0;
  font-weight: bold;
}

/* ✅ Colors per a valors positius / negatius */
td.pos { color: #2ecc71; font-weight: 600; }
td.neg { color: #e74c3c; font-weight: 600; }

/* Contenidor scrollable */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* desplaçament suau al mòbil */
}

.table-wrapper table {
  min-width: 600px; /* força scroll si la pantalla és petita */
}

/* ─── Mode fosc per taules ─── */
body.tema-fosc table {
  background: #222;
  color: #eee;
  border-color: #333;
}

body.tema-fosc th {
  background: #333;
  color: #fff;
}

body.tema-fosc td {
  border-bottom: 1px solid #444;
}

tr.total {
  background: var(--bg-total, #222);  /* fosc si tema fosc */
  color: var(--fg-total, #fff);
  font-weight: bold;
}

body.tema-clar tr.total {
  --bg-total: #f0f0f0;
  --fg-total: #111;
}

body.tema-fosc tr.total {
  --bg-total: #333;
  --fg-total: #fff;
}

/* ✅ Permet seleccionar text dins les taules */
table, table * {
  -webkit-user-select: text !important;
  user-select: text !important;
}



/* ──────────────────────────────
   4. BOTONS I FORMULARIS
──────────────────────────────── */
button, input[type="submit"] {
  background: #6A9915;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #588012;
}

input, select {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.6rem;
}

/* Botons principals (enllaços .menu-item) */
a.menu-item {
  display: inline-block;
  background: #fff;
  color: #191a19;
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

a.menu-item:hover {
  background: #6A9915;
  color: #fff;
}

/* ──────────────────────────────
   Formularis amb icona 👁️ mostrar/ocultar
──────────────────────────────── */
.input-eye {
  position: relative;
  display: flex;
  align-items: center;    /* centra verticalment */
  width: 100%;
  max-width: 460px;
}

.input-eye input {
  flex: 1;
  padding-right: 38px;    /* deixa espai per al botó */
  box-sizing: border-box;
}

.input-eye .eye-btn {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: inherit;
  line-height: 1;
  padding: 2px 4px;
  transform: translateY(-50%);
  top: 50%;               /* centra perfectament el botó */
}

.input-eye .eye-btn:hover {
  opacity: 0.8;
}


/* Missatges */
.msg {
  background: #e6ffe6;
  color: #004400;
  padding: 8px;
  border-radius: 5px;
  margin-bottom: 1rem;
}
.error {
  color: red;
  font-size: 0.9rem;
}

/* ──────────────────────────────
   5. PÀGINA INDEX / LOGIN
──────────────────────────────── */
body.index, body.auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
}

body.index .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(var(--vh, 1vh) * 100);
}

.logo-home {
  width: 250px;
  max-width: 85%;
  cursor: pointer;
  transition: transform 0.2s;
}
.logo-home:hover {
  transform: scale(1.05);
}

/* Selector idioma i botó info */
#lang {
  position: fixed;
  top: 10px;
  right: 12px;
  font-size: 1rem;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.info-top {
  position: fixed;
  top: 10px;
  left: 12px;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ──────────────────────────────
   6. DASHBOARD — Responsive
──────────────────────────────── */
body.dashboard {
  padding-top: 60px;
  text-align: center;
}

/* Menú flexible i sempre centrat */
body.dashboard .menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 24px auto;
  max-width: 900px;
  justify-items: center;
}

body.dashboard .menu a.menu-item {
  display: inline-block;
  width: auto;
  min-width: 140px;
  max-width: 200px;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: #111;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.15s ease;
}

body.dashboard .menu a.menu-item:hover {
  background: #e9f7ef;
  transform: scale(1.03);
}


/* ──────────────────────────────
   7. RESERVES ACTIVES
──────────────────────────────── */
body.page-reserved .saldo {
  background: #e9f7ef;
  font-weight: bold;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 20px;
}
body.page-reserved .saldo span {
  display: inline-block;
  min-width: 140px;
}
body.page-reserved .verde { color: green; }
body.page-reserved .rojo { color: #b22222; }

/* ──────────────────────────────
   8. FOOTER — sempre a baix
──────────────────────────────── */
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body > .container {
  flex: 1; /* ocupa tot l'espai disponible */
}

footer {
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  padding: 10px;
  width: 100%;
  background: transparent;
  margin-top: auto; /* empeny el footer al final */
}


/* ──────────────────────────────
   9. RESPONSIVE
──────────────────────────────── */
@media (max-width: 600px) {
  .card { padding: 1.2rem; }
  /* .menu-item { width: 80%; } */
  table { font-size: 0.85rem; }
  th, td { padding: 4px; }
}

/* ──────────────────────────────
   Ajustos per pantalles grans (ordinador)
──────────────────────────────── */
@media (min-width: 900px) {
  body {
    width: 100%;
    background-color: var(--bg-color, #f8f9fa);
  }

  .container {
    width: 95%;
    max-width: 1920px;   /* límit màxim */
    margin: 0 auto;
  }

  .card {
    width: 92%;
    max-width: 1880px;   /* una mica menys per deixar marge */
    margin: 0 auto;
  }

  .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .table-wrapper table {
    min-width: 1100px;
    width: 100%;
  }
}

/* Scrollbar en mode fosc */
.tema-fosc .table-wrapper {
  scrollbar-color: #888 #1e1e1e;
}



/* ──────────────────────────────
   MENÚ GENERAL (Dashboard, etc.)
──────────────────────────────── */
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 24px auto;
  max-width: 900px;
  justify-items: center;
}

/* 🔹 Limita a 4 columnes màxim */
@media (min-width: 900px) {
  .menu {
    grid-template-columns: repeat(4, 1fr);
    max-width: 880px;
  }
}

.menu a.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: #111;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.15s ease;
}

.menu a.menu-item:hover {
  background: #e9f7ef;
  transform: scale(1.03);
}

/* ──────────────────────────────
   10. TEMA FOSC
──────────────────────────────── */
body.tema-fosc {
  background: #121212;
  color: #e0e0e0;
}

body.tema-fosc header.hdr {
  background: #1e1e1ecc;
  color: #e0e0e0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.tema-fosc .card,
body.tema-fosc .menu a.menu-item {
  background: #1f1f1f;
  border: 1px solid #333;
  color: #e0e0e0;
}

body.tema-fosc .menu a.menu-item:hover {
  background: #2a2a2a;
  color: #fff;
}

body.tema-fosc input,
body.tema-fosc select {
  background: #222;
  color: #eee;
  border: 1px solid #444;
}

body.tema-fosc button {
  background: #6A9915;
  color: white;
}

body.tema-fosc footer {
  color: #aaa;
}

/* ──────────────────────────────
   Fons segons tema (definitiu)
──────────────────────────────── */
html, body {
  min-height: 100%;
  height: auto;
  background-color: #f8f9fa;  /* per defecte: clar */
  color: #191a19;
}

html.tema-fosc,
body.tema-fosc {
  background-color: #121212 !important;
  color: #f1f1f1 !important;
}

html.tema-clar,
body.tema-clar {
  background-color: #f8f9fa !important;
  color: #191a19 !important;
}

/* Evita que el fons acabi abans del contingut */
body {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}



/* ──────────────────────────────
   11. TAULES I FORMULARIS EDITABLES
──────────────────────────────── */

/* Formularis petits en línia (ex: afegir o filtrar) */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.inline-form input[type="text"],
.inline-form input[type="number"],
.inline-form select {
  width: 160px;
  text-transform: uppercase;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
}

.inline-form label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.inline-form button {
  margin-left: 8px;
}

/* Inputs dins taules editables */
.table-wrapper table input[type="text"],
.table-wrapper table input[type="number"] {
  width: 80px;
  text-align: center;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.table-wrapper table input[type="checkbox"] {
  transform: scale(1.1);
}

/* Accions (botons 💾 🔄 🗑️) */
.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.actions button {
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s;
}

.actions button:hover {
  transform: scale(1.1);
}

/* Mode fosc */
.tema-fosc .table-wrapper table input[type="text"],
.tema-fosc .table-wrapper table input[type="number"] {
  background: #2b2b2b;
  color: #f1f1f1;
  border: 1px solid #555;
}

/* ──────────────────────────────
   Correcció fletxetes input:number en tema fosc
──────────────────────────────── */
.tema-fosc input[type="number"]::-webkit-inner-spin-button,
.tema-fosc input[type="number"]::-webkit-outer-spin-button {
  filter: invert(1);              /* les pinta clares sobre fons fosc */
}

.tema-fosc input[type="number"] {
  background-color: #222;         /* fons coherent amb el tema fosc */
  color: #eee;
  border: 1px solid #444;
}

/* ──────────────────────────────
   Colors per COMPRA / VENDA
──────────────────────────────── */
td.compra, td.buy {
  color: #008000; /* verd */
  font-weight: bold;
}
td.venda, td.sell {
  color: #b22222; /* vermell fosc */
  font-weight: bold;
}

/* ──────────────────────────────
   Evitar trencar la data en dues línies
──────────────────────────────── */
.table-wrapper table td:first-child {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;   /* ajustable */
}

@media (max-width: 600px) {
  .table-wrapper table td:first-child {
    max-width: 110px;
  }
}

/* ──────────────────────────────
   10. RESERVES — colors i gràfic
──────────────────────────────── */

.page-reserved h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1rem;
}

/* ── Barra resum (saldo total / reservat / disponible) ── */
.page-reserved .saldo {
  background: #f1f5f1;
  color: #111;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Tema fosc */
.tema-fosc.page-reserved .saldo {
  background: #1e1e1e;
  color: #ddd;
  box-shadow: 0 2px 8px rgba(255,255,255,0.05);
}

/* ──────────────────────────────
   Ajust mida gràfic reserved.php (forçat)
──────────────────────────────── */
#chart-container {
  max-width: 220px !important;   /* força a sobreescriure inline */
  width: 100% !important;
  margin: 10px auto !important;
  text-align: center;
}

#saldoChart {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-height: 220px !important;
}

/* Mòbil una mica més gran */
@media (max-width: 600px) {
  #chart-container {
    max-width: 260px !important;
  }
  #saldoChart {
    max-height: 260px !important;
  }
}


.tema-fosc canvas {
  background-color: transparent !important;
}

/* ── Corregeix color dels títols i etiquetes en mode fosc ── */
.tema-fosc.page-reserved h1,
.tema-fosc.page-reserved h2,
.tema-fosc.page-reserved h3,
.tema-fosc.page-reserved label,
.tema-fosc.page-reserved th {
  color: #eee !important;
}

/* ──────────────────────────────
   Ajustos per list_pairs i manage_pairs
──────────────────────────────── */
.page-list-pairs select {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.9rem;
}

.page-list-pairs select option {
  background-color: var(--card-bg);
  color: var(--text-color);
}

/* Botons d'acció en línia */
.action-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.action-buttons button {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
}

.action-buttons button:hover {
  background: var(--btn-bg-hover);
}

/* Inputs numèrics més estrets */
.page-list-pairs input[type="number"] {
  width: 70px;
  background: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 3px 5px;
}

/* ──────────────────────────────
   Correcció select (text invisible al tema fosc)
──────────────────────────────── */
.tema-fosc select,
.tema-fosc select option {
  background-color: #222 !important;
  color: #fff !important;
}

.tema-clar select,
.tema-clar select option {
  background-color: #fff !important;
  color: #000 !important;
}

/* ──────────────────────────────
   Select més ample i estable al mòbil
──────────────────────────────── */
.page-list-pairs select {
  min-width: 100px;   /* ample mínim per evitar que es talli */
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 20px; /* espai pel triangle del desplegable */
}

@media (max-width: 600px) {
  .page-list-pairs select {
    min-width: 120px; /* una mica més ample al mòbil */
    font-size: 1rem;
  }
}

/* ──────────────────────────────
   Alineació vertical de cel·les i inputs
──────────────────────────────── */
/* Alineació vertical uniforme a list_pairs */
.page-list-pairs tr { 
  height: 36px;                 /* alçada de fila coherent */
}

.page-list-pairs th,
.page-list-pairs td {
  vertical-align: middle;       /* centra el contingut a la cel·la */
  padding: 6px 8px;
}

/* Inputs i selects amb la mateixa alçada de la fila */
.page-list-pairs input[type="number"],
.page-list-pairs input[type="text"],
.page-list-pairs select {
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  margin: 0;
}

/* Botons d’accions a la mateixa alçada i en línia */
.page-list-pairs .action-buttons {
  display: inline-flex;
  gap: 6px;
  align-items: center;          /* centra verticalment els botons */
}

.page-list-pairs .action-buttons button {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
}







/* ──────────────────────────────
   Configuració d'usuari (versió final neta)
──────────────────────────────── */
.page-config-user select,
.page-config-user input[type="text"],
.page-config-user input[type="email"],
.page-config-user input[type="password"] {
  width: 100%;
  max-width: 460px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #666;
  background: rgba(255,255,255,0.07);
  color: inherit;
  box-sizing: border-box;
}

.tema-fosc .page-config-user input,
.tema-fosc .page-config-user select {
  border-color: #444;
  background: rgba(0,0,0,0.35);
}

/* ──────────────────────────────
   Taula de configuració usuari (sense línies, totalment plana)
──────────────────────────────── */
.config-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  table-layout: fixed;
  border: none;
  background: transparent;       /* evita tons grisos de fons */
}

.config-table tr,
.config-table td {
  border: none !important;       /* força eliminació de línies */
  background: transparent !important;
  box-shadow: none !important;   /* alguns navegadors posen ombres lleus */
}

.config-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.config-table td:first-child {
  width: 40%;                    /* títols */
  font-weight: 600;
  text-align: right;
  color: #ccc;
  padding-right: 14px;
}

.config-table td:last-child {
  width: 60%;                    /* valors o camps */
  text-align: left;
}

.tema-fosc .config-table td:first-child {
  color: #ddd;
}

/* Inputs i selects dins la taula */
.config-table select,
.config-table input {
  width: 100%;
  max-width: 320px;
  padding: 6px 8px;
  border: 1px solid #666;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  color: inherit;
  vertical-align: middle;
  box-sizing: border-box;
}

.tema-fosc .config-table select,
.tema-fosc .config-table input {
  border-color: #444;
  background: rgba(0,0,0,0.35);
}

/* ──────────────────────────────
   Alineació vertical perfecta camps/etiquetes
──────────────────────────────── */
.config-table td {
  vertical-align: middle;    /* centra contingut verticalment */
  padding: 6px 10px;
}

.config-table input,
.config-table select {
  vertical-align: middle;    /* evita que el camp pugi més amunt */
  line-height: 1.4em;
  margin: 0;
}


/* ──────────────────────────────
   Separadors i botons
──────────────────────────────── */
.page-config-user hr {
  margin: 20px 0;
  border: none;
  height: 1px;
  background: rgba(128,128,128,0.3);
}

.page-config-user .test-btn,
.page-config-user .main-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #6a9915;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.page-config-user .test-btn:hover,
.page-config-user .main-btn:hover {
  background: #82b71a;
}

/* ──────────────────────────────
   HR dins la taula de configuració
──────────────────────────────── */
.config-table hr {
  margin: 4px 0;               /* molt menys espai vertical */
  border: none;
  height: 1px;
  background: rgba(128,128,128,0.3);
}

.tema-fosc .config-table hr {
  background: rgba(255,255,255,0.15);
}

/* ──────────────────────────────
   Fons complet (evita franges blanques en pàgines curtes)
──────────────────────────────── */
html, body {
  min-height: 100vh;
  height: auto;
  margin: 0;
  padding: 0;
}

body.tema-fosc, html.tema-fosc {
  background-color: #121212 !important;
  color: #f1f1f1 !important;
}

body.tema-clar, html.tema-clar {
  background-color: #f8f9fa !important;
  color: #191a19 !important;
}

/* ──────────────────────────────
   Pagines d'Informació
──────────────────────────────── */

body[class*="page-info"] .info-card {
  text-align: left;  /* 🔹 per info.html, dashboard_info.php, etc. */
}

/* ──────────────────────────────
   PÀGINES D’INFORMACIÓ (info.html, dashboard_info.php…)
──────────────────────────────── */

body.page-info {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}

/* Capçalera amb petit marge inferior */
body.page-info header.hdr {
  margin-bottom: 30px;  /* 🔹 espai sota la barra superior */
}

/* Contingut principal amb separació regular entre targetes */
body.page-info main {
  margin-top: 80px;       /* 🔹 espai real sota la barra superior */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;              /* 🔹 separació entre targetes */
  padding-bottom: 40px;   /* 🔹 marge inferior general */
}


/* Targetes d’informació */
body.page-info .info-card {
  width: 100%;
  max-width: 700px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 2rem;
  text-align: left;
}

/* Adaptació per a pantalles petites */
@media (max-width: 600px) {
  body.page-info .info-card {
    padding: 1.2rem;
    max-width: 95%;
  }
}

/* ──────────────────────────────
   Permetre seleccionar text a les pàgines d’informació
──────────────────────────────── */
body.page-info, 
body.page-info * {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* ──────────────────────────────
   PÀGINA: dashboard_info.php
──────────────────────────────── */
body.page-dashboard-info main {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 40px;
}

body.page-dashboard-info .info-card {
  max-width: 700px;   /* mateixa amplada que info.html */
  width: 100%;
  text-align: left;
}

/* ──────────────────────────────
   Boto secundari: 📩 Missatge de prova
──────────────────────────────── */
button.test-btn,
.test-btn {
  background-color: #6c8ebf !important;     /* blau grisós */
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

button.test-btn:hover,
.test-btn:hover {
  background-color: #5a7aa3 !important;
  transform: scale(1.03);
}

body.tema-fosc button.test-btn,
body.tema-fosc .test-btn {
  background-color: #5073a6 !important;
}

body.tema-fosc button.test-btn:hover,
body.tema-fosc .test-btn:hover {
  background-color: #3d5e88 !important;
}

/* ──────────────────────────────
   Excepcions: targetes més estretes
   (formularis de creació i configuració d’usuari)
──────────────────────────────── */
body.page-create-user .card,
body.page-config-user .card {
  max-width: 700px !important;
  width: 100% !important;
  margin: 1rem auto !important;
}

/* ──────────────────────────────
   Ajustar títols de parells a open_detailed
──────────────────────────────── */
body.page-open-detailed .card h3 {
  text-align: left !important;
  margin-left: 4px;
  margin-bottom: 2px;
  font-weight: 600;
}

/* Tema clar */
body.tema-clar.page-open-detailed .card h3 {
  color: #222;
}

/* Tema fosc */
body.tema-fosc.page-open-detailed .card h3 {
  color: #fff;
}

/* Opcional: separació entre parells */
body.page-open-detailed .card h3:not(:first-of-type) {
  margin-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
}

/* ──────────────────────────────
   Alineació perfecta inputs/text a manage_pairs
──────────────────────────────── */
body.page-manage table td {
  vertical-align: middle;
  padding: 4px 6px;
}

/* Fem que cada cel·la amb contingut editable s'alineï amb flex */
body.page-manage table td form,
body.page-manage table td select,
body.page-manage table td input,
body.page-manage table td .action-buttons {
  display: inline-flex;
  align-items: center;
}

/* Ajust d’alçada visual dels inputs/select */
body.page-manage table input,
body.page-manage table select {
  height: 26px;
  padding: 2px 6px;
  font-size: 0.9rem;
  margin: 0;
}

/* ──────────────────────────────
   ADMIN · Parells oberts
──────────────────────────────── */
body.page-admin-open .card {
  max-width: 600px;
  margin: 40px auto;
  padding: 1.5rem;
}