/*!
 * tramitaZero v2 — SPDX-License-Identifier: Apache-2.0
 * Copyright 2025-2026 Roberto García Paradela and tramitaZero contributors.
 * Overrides on top of MAQINT 3.0.2 (© Xunta de Galicia, Apache-2.0 / EUPL-1.2).
 * See LICENSE and NOTICE at the repository root.
 */
/*
 * tramitaZero — Branding tipográfico y ajustes específicos de página.
 * Carga tras tramitazero-dark.css.
 */

/* Wordmark tipográfico (cabecera y login) */
#header-brand .brand-item {
  font-weight: 300;
  font-size: 1.4em;
  letter-spacing: -0.02em;
}
#header-brand .brand-item .brand-color-second {
  font-weight: 700;
}

/* Página de inicio: logo tipográfico grande */
.tz-wordmark {
  font-family: inherit;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tz-text);
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}
.tz-wordmark .tz-zero {
  font-weight: 800;
  color: var(--tz-acc2);
  background: linear-gradient(135deg, var(--tz-acc2), var(--tz-acc1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tz-wordmark .tz-dot {
  font-weight: 800;
  color: var(--tz-acc1);
  font-size: 0.5em;
  transform: translateY(-0.4em);
  margin: 0 0.1em;
}

.tz-tagline {
  color: #b1bac4;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin-top: 0.5em;
  font-weight: 300;
}

/* Asegurar que el cuerpo de texto de las páginas hereda el texto claro del tema.
   MAQINT tiene reglas con color oscuro heredado de la hoja original que, al no
   pintarse aquí, dejaban los párrafos apenas visibles sobre el fondo oscuro. */
#main-content,
#main-content .page,
#main-content .page-content,
#main-content .page-content p,
#main-content .page-content li,
#main-content .page-content dt,
#main-content .page-content dd,
#main-content .page-content td,
#main-content .page-content th,
#main-content .page-content label {
  color: var(--tz-text) !important;
}
#main-content .page-content h1,
#main-content .page-content h2,
#main-content .page-content h3,
#main-content .page-content h4,
#main-content .page-content h5,
#main-content .page-content h6 {
  color: var(--tz-text) !important;
}
/* MAQINT adorna h3 con `border-bottom:2px dotted #56778a` y h5 con subrayado
   punteado del mismo gris-azulado. Sobre el fondo oscuro queda como una
   línea celeste saturada que confunde. Ajustamos el adorno al tema. */
#main-content .page-content h3 {
  border-bottom-color: var(--tz-line) !important;
}
#main-content .page-content h5 {
  text-decoration-color: var(--tz-line) !important;
}

/* Página de inicio — items-wrapper adaptado al tema oscuro */
#page-inicio .item-wrapper {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
  width: 100%;
  justify-content: center;
}
#page-inicio .item-wrapper > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.1rem;
  margin: 0 0.5rem 1rem;
  border-radius: 10px;
  max-width: 22%;
  min-width: 220px;
  line-height: 1.3em;
  border: 1px solid var(--tz-line);
  background: linear-gradient(180deg, var(--tz-bg3), var(--tz-bg2)) !important;
  color: var(--tz-text) !important;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#page-inicio .item-wrapper > div:hover {
  transform: translateY(-2px);
  border-color: var(--tz-acc1);
  box-shadow: 0 4px 14px rgba(88,166,255,0.18);
}
#page-inicio .item-wrapper > div i {
  color: var(--tz-acc1);
  margin-right: 0.5rem;
}

/* Tarjetas de modo operativo en Inicio */
.tz-mode-card {
  display: flex;
  flex-direction: column;
  background-color: var(--tz-bg2);
  border: 1px solid var(--tz-line);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tz-mode-card:hover { transform: translateY(-2px); }
.tz-mode-card:hover {
  border-color: var(--tz-acc1);
  box-shadow: 0 4px 16px rgba(88, 166, 255, 0.15);
}
.tz-mode-card .tz-mode-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tz-acc1);
  margin-bottom: 0.5rem;
}
.tz-mode-card .tz-mode-title i { margin-right: 0.5rem; }
.tz-mode-card .tz-mode-body { color: #c9d1d9; line-height: 1.55; flex: 1; }
.tz-mode-card .tz-mode-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tz-line);
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--tz-acc2);
  word-break: break-all;
}

/* Avatar tramitaZero (header + menú lateral).
   Sustituye al antiguo `user-icon.png` (logo corporativo) por el monograma tZ. */
img.tz-avatar {
  border-radius: 50%;
  background: transparent;
  padding: 0;
  box-sizing: content-box;
}
/* Avatar grande del panel de usuario (menú lateral derecho) */
#right-menu .user-image.tz-avatar {
  width: 72px;
  height: 72px;
  border: 2px solid var(--tz-acc1);
  box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.15);
  display: block;
  margin: 0 auto 0.5rem;
}
#right-menu .user-name { color: var(--tz-text); font-weight: 600; }
#right-menu .user-role { color: #b1bac4; font-size: 0.9em; }
/* Avatar pequeño en la cabecera (dropdown del perfil) */
#header-profile a .tz-avatar {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--tz-acc1);
}
#header-profile a:hover .tz-avatar,
#header-profile a:focus .tz-avatar {
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25);
}

/* Tabla de procedementos */
.tz-table-actions { white-space: nowrap; }
.tz-table-actions .btn { margin-right: 0.25rem; }

/* Pills de aplicación */
.tz-app-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.tz-app-pill.IGX { background: rgba(88, 166, 255, 0.15); color: var(--tz-acc1); border-color: var(--tz-acc1); }
.tz-app-pill.PSX { background: rgba(126, 231, 135, 0.15); color: var(--tz-acc2); border-color: var(--tz-acc2); }
.tz-app-pill.MRX { background: rgba(210, 153, 34, 0.15); color: var(--tz-warn); border-color: var(--tz-warn); }

/* Bloque de código tipo "curl" / snippet */
.tz-snippet {
  background-color: var(--tz-bg0);
  border: 1px solid var(--tz-line);
  border-left: 3px solid var(--tz-acc1);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  color: var(--tz-acc2);
  overflow-x: auto;
  white-space: pre;
  margin: 0.75rem 0;
}

/* ================= Catálogo de scripts inyectables ================= */
.tz-catalog-group { margin-bottom: 1.5rem; }
.tz-catalog-title {
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--tz-line);
  color: var(--tz-acc1);
  font-weight: 600;
  font-size: 1.1rem;
}
.tz-catalog-title i { color: var(--tz-acc2); }
.tz-catalog-count {
  color: var(--tz-dim);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 0.3rem;
}
.tz-catalog-table {
  background: var(--tz-bg2) !important;
  border: 1px solid var(--tz-line);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0;
}
.tz-catalog-table thead th {
  background: var(--tz-bg3) !important;
  color: var(--tz-text) !important;
  border-bottom: 1px solid var(--tz-line) !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tz-catalog-table td, .tz-catalog-table th {
  color: var(--tz-text) !important;
  border-color: var(--tz-line) !important;
  vertical-align: middle !important;
}
.tz-catalog-table td code {
  background: rgba(88, 166, 255, 0.08);
  color: var(--tz-acc1);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.9em;
}
.tz-catalog-table tbody tr:hover { background: rgba(88, 166, 255, 0.04); }
.tz-copy-btn { border-color: var(--tz-line) !important; }

/* ================= Andamio para ferramentas Web ================= */
.tz-tool-shell {
  min-height: 60vh;
}
.tz-tool-anchor {
  padding: 0.6rem 0;
}
/* Botóns que inxectan os scripts v1 (Bootstrap 3 .btn-primary) */
.tz-tool-shell .btn {
  margin: 0.25rem 0.35rem 0.25rem 0;
}
.tz-tool-shell textarea.form-control {
  background: var(--tz-bg0) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}
.tz-tool-shell .form-label,
.tz-tool-shell label { color: var(--tz-text) !important; }
.tz-tool-shell .form-text,
.tz-tool-shell small { color: var(--tz-dim) !important; }

/* ================= Ferramenta "Xera o KIT" (pipeline 3 pasos) ================= */
.tz-kit {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tz-kit-step {
  background: var(--tz-bg2);
  border: 1px solid var(--tz-line);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tz-kit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.tz-kit-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0 !important;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tz-text) !important;
}
.tz-kit-num {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tz-acc2), var(--tz-acc1));
  color: #0d1117;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}
.tz-kit-controls {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.tz-file-btn {
  position: relative;
  cursor: pointer;
}
.tz-kit-textarea {
  background: var(--tz-bg0) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.45;
  width: 100%;
  resize: vertical;
  min-height: 160px;
}
.tz-kit-textarea[readonly] {
  background: #0b0f14 !important;
  color: #c9d1d9 !important;
}
.tz-kit-next,
.tz-kit-actions {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tz-kit-status {
  font-size: 0.85rem;
  color: var(--tz-dim);
  min-height: 1.2em;
}
.tz-kit-status-ok   { color: var(--tz-acc2); }
.tz-kit-status-warn { color: var(--tz-warn); }
.tz-kit-status-err  { color: #ff7b72; }
.tz-kit-status-info { color: var(--tz-dim); }

/* O botón "de paso" a continuación dunha textarea xera contraste co fondo */
.tz-kit-next .btn-primary {
  background-color: var(--tz-acc1);
  border-color: var(--tz-acc1);
  color: #0d1117;
  font-weight: 600;
}
.tz-kit-next .btn-primary:hover {
  filter: brightness(1.08);
}
.tz-kit-actions .btn-success {
  background-color: var(--tz-acc2);
  border-color: var(--tz-acc2);
  color: #0d1117;
  font-weight: 600;
}
.tz-kit-actions .btn-success:hover {
  filter: brightness(1.08);
}

/* ── Ferramenta "Multiplica código" ── */
.tz-mul-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tz-mul-label {
  color: var(--tz-text) !important;
  margin: 0;
  font-weight: 500;
}
.tz-mul-num {
  width: 7rem !important;
  background: var(--tz-bg0) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
}

/* ================= Correo ofuscado ================= */
/* Os separadores "@" e "." inxéctanse vía CSS `content` para evitar que apareza
   o símbolo literal no HTML. O que ve o usuario é "user@domain.tld"; o que ve
   un harvester que ignore o CSS é "user" + "domain" + "com" sen separadores. */
.tz-email { white-space: nowrap; }
.tz-email:hover, .tz-email:focus { text-decoration: underline; cursor: pointer; }
.tz-email-sep::before { color: inherit; }
.tz-email-at::before  { content: "\0040"; }  /* @ */
.tz-email-dot::before { content: "\002e"; }  /* . */
.tz-email-honeypot { display: none !important; }