/*
 * TEMA "COCINA" PARA EL MARCO DE LA APLICACIÓN (index.php: barra superior y
 * menú lateral). Mismo estilo que css/tema-gc.css. Solo aspecto: no cambia
 * opciones, orden ni enlaces del menú. Se activa con la clase "tema-gc-marco"
 * en <body> (ver top-header.php).
 */
body.tema-gc-marco {
  --gm-bar: #24231f;          /* barra superior */
  --gm-menu: #2c2b26;         /* menú lateral */
  --gm-menu-2: #25241f;       /* submenús */
  --gm-line: #3a3832;
  --gm-text: #ddd8cb;
  --gm-text-2: #a39e90;
  --gm-hover: #36342d;
  --gm-active: #3d3a31;
  --gm-accent: #e3a94e;
  --gm-title: #f5f2ec;
  --gm-font-title: "Fraunces", Georgia, "Times New Roman", serif;
  --gm-font-label: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
body.tema-gc-marco.tema-gc-oscuro {
  --gm-bar: #141416;
  --gm-menu: #1b1b1e;
  --gm-menu-2: #161618;
  --gm-line: #2a2a2f;
  --gm-hover: #26262a;
  --gm-active: #2e2b24;
}
body.tema-gc-marco.tema-gc-verde {
  --gm-bar: #1c2a12;
  --gm-menu: #223319;
  --gm-menu-2: #1c2a14;
  --gm-line: #2f4322;
  --gm-text: #dfe8d4;
  --gm-text-2: #a3b394;
  --gm-hover: #2b3f1f;
  --gm-active: #324a24;
  --gm-accent: #8cc152;
}
body.tema-gc-marco.tema-gc-verde.tema-gc-oscuro {
  --gm-bar: #111a0b;
  --gm-menu: #162210;
  --gm-menu-2: #121c0d;
  --gm-line: #24341a;
  --gm-hover: #1f2e16;
  --gm-active: #27391b;
}

/* ---------- Barra superior ---------- */
body.tema-gc-marco .wrapper-header {
  background: var(--gm-bar);
  color: var(--gm-text);
  border-bottom: 1px solid var(--gm-line);
}
body.tema-gc-marco .wrapper-header h5 {
  font-family: var(--gm-font-title);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--gm-title);
  letter-spacing: .005em;
}
body.tema-gc-marco .user-info label,
body.tema-gc-marco .user-info label a,
body.tema-gc-marco .user-info label span {
  color: var(--gm-text) !important;
}
body.tema-gc-marco #msgDateSubs {
  font-family: var(--gm-font-label);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gm-text-2) !important;
}
body.tema-gc-marco #msgDateSubs span { color: var(--gm-text-2) !important; }
body.tema-gc-marco .db-container > label {
  font-family: var(--gm-font-label);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gm-text-2) !important;
}
/* Selector de base de datos como pastilla */
body.tema-gc-marco .wrapper-header .db-container .select-wrapper input.select-dropdown {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--gm-line) !important;
  border-radius: 999px;
  height: 30px;
  line-height: 30px;
  padding: 0 28px 0 12px;
  color: var(--gm-title);
  font-size: 13px;
  box-sizing: border-box;
}
body.tema-gc-marco .wrapper-header .select-wrapper span.caret { color: var(--gm-text-2); right: 10px; }
body.tema-gc-marco ul.header-menu .nav-item a { color: var(--gm-text); border-radius: 8px; }
body.tema-gc-marco ul.header-menu .nav-item a:hover { background: var(--gm-hover); color: var(--gm-accent); }
body.tema-gc-marco .user-options {
  background: var(--gm-menu);
  border: 1px solid var(--gm-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
body.tema-gc-marco .user-options a { color: var(--gm-text) !important; }

/* ---------- Logo (olla en línea + nombre) ---------- */
body.tema-gc-marco .wr-logo .gm-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 0 18px;
  cursor: pointer;
}
body.tema-gc-marco .wr-logo .gm-marca img {
  position: static !important;
  width: 36px;
  height: 36px;
  max-width: none;
  margin: 0;
}
body.tema-gc-marco .gm-marca-txt b {
  display: block;
  font-family: var(--gm-font-title);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.05;
  color: var(--gm-title);
  white-space: nowrap;
}
body.tema-gc-marco .gm-marca-txt i {
  font-family: var(--gm-font-label);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gm-accent);
}
/* El nombre ya va junto al logo: el título de la barra sobraría */
body.tema-gc-marco .wr-title h5 { visibility: hidden; }
/* Sin el óvalo grande, el menú puede empezar más arriba */
body.tema-gc-marco .app-menu { padding-top: 72px !important; }
/* Menú contraído: solo la olla */
body.tema-gc-marco.collapse-app .gm-marca-txt { display: none; }
@media only screen and (max-width: 600px) {
  body.tema-gc-marco .wr-logo .gm-marca { padding: 6px 0 0 10px; }
  body.tema-gc-marco .gm-marca-txt b { font-size: 1rem; }
}

/* ---------- Menú lateral ---------- */
body.tema-gc-marco .app-menu { background: var(--gm-menu); border-right: 1px solid var(--gm-line); }
body.tema-gc-marco ul.menu .nav-item { border-bottom: 1px solid var(--gm-line); }
body.tema-gc-marco ul.menu .nav-item.sup-menu .nav-item { border-top: 1px solid var(--gm-line); }
/* Los submenús traen un gris fijo en el propio HTML (plugins.js): se sustituye */
body.tema-gc-marco ul.menu .nav-item.sup-menu ul,
body.tema-gc-marco ul.menu ul.sub-menu { background: var(--gm-menu-2) !important; }
body.tema-gc-marco ul.menu .nav-item a {
  color: var(--gm-text);
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
body.tema-gc-marco ul.menu .nav-item a i.material-icons { color: var(--gm-text-2); transition: color .15s; }
body.tema-gc-marco ul.menu .nav-item a:hover { background: var(--gm-hover); color: var(--gm-title); }
body.tema-gc-marco ul.menu .nav-item a:hover i.material-icons { color: var(--gm-accent); }
/* Opción abierta en este momento (la marca js/tema-gc-marco.js) */
body.tema-gc-marco ul.menu .nav-item > a.gm-activo {
  background: var(--gm-active);
  color: var(--gm-title);
  border-left-color: var(--gm-accent);
}
body.tema-gc-marco ul.menu .nav-item > a.gm-activo i.material-icons { color: var(--gm-accent); }
body.tema-gc-marco ul.menu .nav-item.sup-menu .link-sm { border-left: 0; }
body.tema-gc-marco ul.menu .nav-item.sup-menu .link-sm i { color: var(--gm-text-2); }
body.tema-gc-marco ul.menu .nav-item.sup-menu:hover > .link-sm { background: var(--gm-hover); }
body.tema-gc-marco ul.menu .nav-item.sup-menu:hover > .link-sm i { color: var(--gm-accent); }

/* Aviso de cookies */
body.tema-gc-marco .cookies-msg { background: var(--gm-bar); color: var(--gm-text); border-top: 1px solid var(--gm-line); }
body.tema-gc-marco .cookies-msg a { color: var(--gm-accent); }
body.tema-gc-marco .cookies-msg .btn { background: var(--gm-accent); color: #1c1b17; border-radius: 8px; box-shadow: none; }

/* Barra de desplazamiento del menú, discreta */
body.tema-gc-marco .ps-scrollbar-y { background-color: var(--gm-line) !important; }

@media (prefers-reduced-motion: reduce) {
  body.tema-gc-marco * { transition: none !important; }
}