/* ============================================================
   Prism Group — capa global "fiel a GitHub" para Gitea 1.27.2

   Como funciona:
   1. Los bloques de modo definen la paleta Primer en variables --pgh-*.
   2. Un unico bloque :root mapea las ~90 variables --color-* de Gitea
      a esas --pgh-*. Gitea ya esta tokenizado, asi que remapear los
      tokens cambia toda la app de forma coherente.

   El fichero NO se llama theme-*.css a proposito: Gitea registra como
   tema seleccionable cualquier custom/public/assets/css/theme-*.css,
   y esto no es un tema alternativo sino una capa encima del activo.
   ============================================================ */

/* ------------------------------------------------------------
   1. Paleta Primer por modo

   Gitea aplica el tema con data-theme en <html>:
     gitea-auto  -> sigue al sistema (media query)
     gitea-dark  -> oscuro fijo   (incluye variantes de daltonismo)
     gitea-light -> claro fijo
   Se replica esa logica para no romper el selector de tema del pie.
   ------------------------------------------------------------ */

:root[data-theme*="light"],
:root[data-theme="gitea-auto"] {
  --pgh-canvas: #ffffff;
  --pgh-canvas-subtle: #f6f8fa;
  --pgh-canvas-overlay: #ffffff;
  --pgh-border: #d0d7de;
  --pgh-border-muted: #d8dee4;
  --pgh-fg: #1f2328;
  --pgh-fg-muted: #656d76;
  --pgh-fg-subtle: #6e7781;
  --pgh-accent: #0969da;
  --pgh-accent-hover: #0550ae;
  --pgh-success: #1a7f37;
  --pgh-danger: #cf222e;
  --pgh-attention: #9a6700;
  --pgh-done: #8250df;
  --pgh-btn-bg: #f6f8fa;
  --pgh-btn-hover: #eff2f5;
  --pgh-btn-primary: #1f883d;
  --pgh-btn-primary-hover: #1a7f37;
  --pgh-neutral-muted: rgb(175 184 193 / 20%);
  --pgh-neutral-strong: rgb(175 184 193 / 38%);
  --pgh-shadow: rgb(31 35 40 / 12%);
  /* Rampa de azul Primer (claro) */
  --pgh-blue-d1: #0550ae;
  --pgh-blue-d2: #033d8b;
  --pgh-blue-d3: #0a3069;
  --pgh-blue-l1: #218bff;
  --pgh-blue-l2: #54aeff;
  --pgh-blue-l3: #80ccff;
  --pgh-blue-l4: #b6e3ff;
  --pgh-blue-l5: #ddf4ff;
  --pgh-accent-rgb: 9 105 218;
}

:root[data-theme*="dark"] {
  --pgh-canvas: #0d1117;
  --pgh-canvas-subtle: #161b22;
  --pgh-canvas-overlay: #161b22;
  --pgh-border: #30363d;
  --pgh-border-muted: #21262d;
  --pgh-fg: #e6edf3;
  --pgh-fg-muted: #8b949e;
  --pgh-fg-subtle: #6e7681;
  --pgh-accent: #4493f8;
  --pgh-accent-hover: #58a6ff;
  --pgh-success: #3fb950;
  --pgh-danger: #f85149;
  --pgh-attention: #d29922;
  --pgh-done: #a371f7;
  --pgh-btn-bg: #21262d;
  --pgh-btn-hover: #30363d;
  --pgh-btn-primary: #238636;
  --pgh-btn-primary-hover: #2ea043;
  --pgh-neutral-muted: rgb(110 118 129 / 40%);
  --pgh-neutral-strong: rgb(110 118 129 / 60%);
  --pgh-shadow: rgb(1 4 9 / 80%);
  /* Rampa de azul Primer (oscuro) */
  --pgh-blue-d1: #1f6feb;
  --pgh-blue-d2: #1158c7;
  --pgh-blue-d3: #0d419d;
  --pgh-blue-l1: #58a6ff;
  --pgh-blue-l2: #79c0ff;
  --pgh-blue-l3: #a5d6ff;
  --pgh-blue-l4: #cae8ff;
  --pgh-blue-l5: #cae8ff;
  --pgh-accent-rgb: 68 147 248;
}

/* Va despues del bloque claro: con gitea-auto y sistema en oscuro, gana este. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="gitea-auto"] {
    --pgh-canvas: #0d1117;
    --pgh-canvas-subtle: #161b22;
    --pgh-canvas-overlay: #161b22;
    --pgh-border: #30363d;
    --pgh-border-muted: #21262d;
    --pgh-fg: #e6edf3;
    --pgh-fg-muted: #8b949e;
    --pgh-fg-subtle: #6e7681;
    --pgh-accent: #4493f8;
    --pgh-accent-hover: #58a6ff;
    --pgh-success: #3fb950;
    --pgh-danger: #f85149;
    --pgh-attention: #d29922;
    --pgh-done: #a371f7;
    --pgh-btn-bg: #21262d;
    --pgh-btn-hover: #30363d;
    --pgh-btn-primary: #238636;
    --pgh-btn-primary-hover: #2ea043;
    --pgh-neutral-muted: rgb(110 118 129 / 40%);
    --pgh-neutral-strong: rgb(110 118 129 / 60%);
    --pgh-shadow: rgb(1 4 9 / 80%);
    --pgh-blue-d1: #1f6feb;
    --pgh-blue-d2: #1158c7;
    --pgh-blue-d3: #0d419d;
    --pgh-blue-l1: #58a6ff;
    --pgh-blue-l2: #79c0ff;
    --pgh-blue-l3: #a5d6ff;
    --pgh-blue-l4: #cae8ff;
    --pgh-blue-l5: #cae8ff;
    --pgh-accent-rgb: 68 147 248;
  }
}

/* La cabecera de GitHub es oscura en ambos modos. */
:root {
  --pgh-header-bg: #24292f;
  --pgh-header-fg: #ffffff;
  --pgh-header-hover: rgb(255 255 255 / 12%);
  --pgh-header-border: transparent;
}
:root[data-theme*="dark"] {
  --pgh-header-bg: #010409;
  --pgh-header-border: #21262d;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="gitea-auto"] {
    --pgh-header-bg: #010409;
    --pgh-header-border: #21262d;
  }
}

/* ------------------------------------------------------------
   2. Mapeo de los tokens de Gitea a la paleta Primer
   ------------------------------------------------------------ */

:root {
  /* Tipografia: stack del sistema, igual que GitHub. */
  --fonts-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Superficies */
  --color-body: var(--pgh-canvas);
  --color-box-body: var(--pgh-canvas);
  --color-box-body-highlight: var(--pgh-canvas-subtle);
  --color-box-header: var(--pgh-canvas-subtle);
  --color-card: var(--pgh-canvas);
  --color-menu: var(--pgh-canvas-overlay);
  --color-footer: var(--pgh-canvas-subtle);
  --color-secondary-bg: var(--pgh-canvas-subtle);
  --color-secondary-nav-bg: var(--pgh-canvas-subtle);
  --color-project-column-bg: var(--pgh-canvas-subtle);
  --color-expand-button: var(--pgh-canvas-subtle);
  --color-markup-table-row: var(--pgh-neutral-muted);

  /* Cabecera */
  --color-nav-bg: var(--pgh-header-bg);
  --color-nav-text: var(--pgh-header-fg);
  --color-nav-hover-bg: var(--pgh-header-hover);

  /* Texto */
  --color-text: var(--pgh-fg);
  --color-text-dark: var(--pgh-fg);
  --color-text-light: var(--pgh-fg-muted);
  --color-text-light-1: var(--pgh-fg-muted);
  --color-text-light-2: var(--pgh-fg-muted);
  --color-text-light-3: var(--pgh-fg-subtle);
  --color-placeholder-text: var(--pgh-fg-subtle);
  --color-caret: var(--pgh-fg);

  /* Bordes y separadores */
  --color-light-border: var(--pgh-border);
  --color-secondary: var(--pgh-border);
  --color-timeline: var(--pgh-border);
  --color-console-border: var(--pgh-border);

  /* Estados */
  --color-hover: var(--pgh-neutral-muted);
  --color-active: var(--pgh-neutral-strong);
  --color-hover-opaque: var(--pgh-canvas-subtle);
  --color-shadow: var(--pgh-shadow);
  --color-shadow-opaque: var(--pgh-shadow);
  --color-overlay-backdrop: rgb(1 4 9 / 60%);

  /* Formularios */
  --color-input-background: var(--pgh-canvas);
  --color-input-border: var(--pgh-border);
  --color-input-text: var(--pgh-fg);
  --color-input-toggle-background: var(--pgh-neutral-muted);

  /* Botones */
  --color-button: var(--pgh-btn-bg);
  --color-secondary-button: var(--pgh-btn-hover);
  --color-secondary-hover: var(--pgh-btn-hover);
  --color-secondary-active: var(--pgh-neutral-strong);

  /* Acento: enlaces y elementos activos. En GitHub es azul; el verde
     queda reservado para el boton primario (ver seccion 3). */
  --color-primary: var(--pgh-accent);
  --color-primary-contrast: #ffffff;
  --color-primary-hover: var(--pgh-accent-hover);
  --color-primary-active: var(--pgh-blue-d1);
  --color-accent: var(--pgh-accent);
  --color-small-accent: var(--pgh-blue-l4);
  --color-primary-dark-1: var(--pgh-blue-d1);
  --color-primary-dark-2: var(--pgh-blue-d2);
  --color-primary-dark-3: var(--pgh-blue-d3);
  --color-primary-dark-4: var(--pgh-blue-d3);
  --color-primary-dark-5: var(--pgh-blue-d3);
  --color-primary-dark-6: var(--pgh-blue-d3);
  --color-primary-dark-7: var(--pgh-blue-d3);
  --color-primary-light-1: var(--pgh-blue-l1);
  --color-primary-light-2: var(--pgh-blue-l2);
  --color-primary-light-3: var(--pgh-blue-l3);
  --color-primary-light-4: var(--pgh-blue-l4);
  --color-primary-light-5: var(--pgh-blue-l5);
  --color-primary-light-6: var(--pgh-blue-l5);
  --color-primary-light-7: var(--pgh-blue-l5);
  --color-primary-alpha-10: rgb(var(--pgh-accent-rgb) / 10%);
  --color-primary-alpha-20: rgb(var(--pgh-accent-rgb) / 20%);
  --color-primary-alpha-30: rgb(var(--pgh-accent-rgb) / 30%);
  --color-primary-alpha-40: rgb(var(--pgh-accent-rgb) / 40%);
  --color-primary-alpha-50: rgb(var(--pgh-accent-rgb) / 50%);
  --color-primary-alpha-60: rgb(var(--pgh-accent-rgb) / 60%);
  --color-primary-alpha-70: rgb(var(--pgh-accent-rgb) / 70%);
  --color-primary-alpha-80: rgb(var(--pgh-accent-rgb) / 80%);
  --color-primary-alpha-90: rgb(var(--pgh-accent-rgb) / 90%);

  /* Semanticos */
  --color-green: var(--pgh-success);
  --color-red: var(--pgh-danger);
  --color-orange: var(--pgh-attention);
  --color-yellow: var(--pgh-attention);
  --color-purple: var(--pgh-done);
  --color-blue: var(--pgh-accent);
  --color-success-text: var(--pgh-success);
  --color-error-text: var(--pgh-danger);
  --color-warning-text: var(--pgh-attention);
  --color-info-text: var(--pgh-accent);
  --color-success-border: var(--pgh-border);
  --color-error-border: var(--pgh-border);
  --color-warning-border: var(--pgh-border);
  --color-info-border: var(--pgh-border);

  /* Codigo */
  --color-code-bg: var(--pgh-canvas);
  --color-markup-code-block: var(--pgh-neutral-muted);
  --color-markup-code-inline: var(--pgh-neutral-muted);
  --color-console-bg: var(--pgh-canvas);
  --color-console-fg: var(--pgh-fg);
  --color-console-fg-subtle: var(--pgh-fg-muted);

  /* Etiquetas y reacciones */
  --color-label-bg: var(--pgh-neutral-muted);
  --color-label-hover-bg: var(--pgh-neutral-strong);
  --color-label-active-bg: var(--pgh-neutral-strong);
  --color-label-text: var(--pgh-fg);
  --color-reaction-bg: var(--pgh-neutral-muted);
  --color-reaction-hover-bg: var(--pgh-blue-l5);
  --color-reaction-active-bg: var(--pgh-neutral-strong);

  /* Radio de borde de GitHub */
  --border-radius: 6px;
  --border-radius-medium: 6px;
}

/* ------------------------------------------------------------
   3. Ajustes de componente

   Gitea acopla enlaces y boton primario a --color-primary. GitHub los
   separa: enlaces azules, accion primaria verde. Se desacopla aqui.
   ------------------------------------------------------------ */

.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--pgh-btn-primary);
  border-color: rgb(240 246 252 / 10%);
  color: #fff;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.button:active {
  background: var(--pgh-btn-primary-hover);
  color: #fff;
}

/* ------------------------------------------------------------
   4. Cabecera

   GitHub: fondo oscuro en ambos modos, 16px de aire lateral,
   items de 14px con pastilla redondeada al hover.
   ------------------------------------------------------------ */

#navbar {
  padding: 0 16px;
  border-bottom: 1px solid var(--pgh-header-border);
}
#navbar .navbar-left > .item,
#navbar .navbar-right > .item,
#navbar .navbar-mobile-right > .item {
  border-radius: 6px;
  font-size: 14px;
}
#navbar .item.active {
  background: var(--pgh-header-hover);
  font-weight: 600;
}
#navbar #navbar-logo img {
  height: 26px;
  width: 26px;
}

/* ------------------------------------------------------------
   5. Pie: bloque de Prism Group

   Convive con la atribucion de Gitea, que se deja intacta.
   ------------------------------------------------------------ */

.page-footer .prism-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 4px;
}
.page-footer .prism-links a {
  display: inline-flex;
  align-items: center;
  color: var(--pgh-fg);
}
.page-footer .prism-links a:hover { color: var(--pgh-accent); }
.page-footer .prism-links .prism-logo {
  display: block;
  height: 22px;
  width: auto;
}
.page-footer .prism-links span { color: var(--pgh-fg-muted); }

@media (max-width: 767px) {
  .page-footer .prism-links span { display: none; }
}

/* ------------------------------------------------------------
   6. Cajon lateral

   La cabecera se queda como cabecera: logo a la izquierda y, a la derecha
   del todo, los iconos de cuenta de Gitea sin tocar. Al cajon solo pasan
   los menus de navegacion global. El reparto lo hace el override de
   base/head_navbar.tmpl; aqui va la presentacion.
   ------------------------------------------------------------ */

:root { --pg-drawer: 268px; }

/* Boton hamburguesa: un item mas de la cabecera. */
#pg-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pgh-header-fg);
  cursor: pointer;
}
#pg-nav-toggle:hover { background: var(--pgh-header-hover); }
#pg-nav-toggle:focus-visible {
  outline: 2px solid var(--pgh-header-fg);
  outline-offset: -2px;
}
/* Tres trazos, sin svg. */
.pg-burger,
.pg-burger::before,
.pg-burger::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.pg-burger { position: relative; }
.pg-burger::before,
.pg-burger::after { content: ""; position: absolute; left: 0; }
.pg-burger::before { top: -5px; }
.pg-burger::after { top: 5px; }

#pg-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(1 4 9 / 50%);
  z-index: 1001;
}
#pg-drawer-backdrop[hidden] { display: none; }

/* El cajon flota sobre el contenido: no reserva ancho ni desplaza nada.
   Va con los colores de la cabecera (oscuros en ambos temas), que es lo
   que hace legible el lockup de letras blancas. */
#pg-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  width: var(--pg-drawer);
  padding: 12px 10px;
  background: var(--pgh-header-bg);
  border-right: 1px solid var(--pgh-border);
  color: var(--pgh-header-fg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
}
body.pg-drawer-open #pg-drawer { transform: none; }

@media (prefers-reduced-motion: reduce) {
  #pg-drawer { transition: none; }
}

.pg-drawer-brand {
  padding: 4px 10px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--pgh-border);
}
.pg-drawer-brand img { display: block; width: auto; }

.pg-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pg-drawer-nav .item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--pgh-header-fg);
  text-decoration: none;
  font-size: 14px;
}
.pg-drawer-nav .item:hover { background: var(--pgh-header-hover); }
.pg-drawer-nav .item.active {
  background: var(--pgh-header-hover);
  font-weight: 600;
}

/* En la landing no hay cabecera, asi que tampoco cajon. */
body:has(.pg-landing) #pg-drawer,
body:has(.pg-landing) #pg-drawer-backdrop { display: none; }

/* ------------------------------------------------------------
   7. Contexto en la cabecera (owner / repo)

   Sustituye a la segunda barra que Gitea dibujaba solo en el panel.
   Aqui esta siempre, en todas las paginas.
   ------------------------------------------------------------ */

.pg-context {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--pgh-border);
  font-size: 14px;
  min-width: 0;
}
.pg-ctx-name {
  color: var(--pgh-header-fg);
  text-decoration: none;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-ctx-name:hover { text-decoration: underline; }
.pg-ctx-current { font-weight: 600; }
.pg-ctx-sep { color: var(--pgh-fg-muted); }

#pg-ctx-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pgh-header-fg);
  cursor: pointer;
}
#pg-ctx-toggle:hover { background: var(--pgh-header-hover); }
#pg-ctx-toggle:focus-visible {
  outline: 2px solid var(--pgh-header-fg);
  outline-offset: -2px;
}

#pg-ctx-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1010;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px;
  background: var(--pgh-canvas-overlay);
  border: 1px solid var(--pgh-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--pgh-shadow);
  color: var(--pgh-fg);
}
#pg-ctx-menu[hidden] { display: none; }

.pg-ctx-search { margin-bottom: 8px; }
#pg-ctx-q {
  width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--pgh-fg);
  background: var(--pgh-canvas);
  border: 1px solid var(--pgh-border);
  border-radius: 6px;
}
#pg-ctx-q:focus {
  outline: none;
  border-color: var(--pgh-accent);
  box-shadow: 0 0 0 3px rgb(var(--pgh-accent-rgb) / 30%);
}

.pg-ctx-section + .pg-ctx-section { margin-top: 10px; }
.pg-ctx-label {
  margin: 0 0 4px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pgh-fg-muted);
}
.pg-ctx-list { display: flex; flex-direction: column; }

.pg-ctx-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
  color: var(--pgh-fg);
  text-decoration: none;
  font-size: 14px;
}
.pg-ctx-item:hover { background: var(--pgh-neutral-muted); color: var(--pgh-fg); }
.pg-ctx-item.active { font-weight: 600; }
.pg-ctx-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-ctx-item-sub {
  font-size: 12px;
  color: var(--pgh-fg-muted);
  margin-left: auto;
  flex: 0 0 auto;
}
.pg-ctx-empty {
  margin: 0;
  padding: 6px;
  font-size: 13px;
  color: var(--pgh-fg-muted);
}

.pg-ctx-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 6px 2px;
  border-top: 1px solid var(--pgh-border);
  color: var(--pgh-accent);
  text-decoration: none;
  font-size: 14px;
}

/* El logo lleva wordmark: en pantallas estrechas el contexto estorba. */
@media (max-width: 767px) {
  .pg-context { display: none; }
}

/* ------------------------------------------------------------
   8. Environments (secrets y variables)

   Capa de presentacion sobre la lista plana de Gitea. No hay tabla
   nueva ni cambio de almacenamiento: el environment sale del prefijo
   del nombre, segun /assets/config/environments.json.
   ------------------------------------------------------------ */

.pg-env {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pgh-border);
}

.pg-env-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.pg-env-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pgh-fg);
  background: var(--pgh-btn-bg);
  border: 1px solid var(--pgh-border);
  border-radius: 999px;
  cursor: pointer;
}
.pg-env-tab:hover { background: var(--pgh-btn-hover); }
.pg-env-tab.active {
  background: var(--pgh-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
/* El sub-environment se marca con sangria, no con otro color. */
.pg-env-tab-sub .pg-env-tab-label { opacity: 0.95; }
.pg-env-tab-sub::before {
  content: "";
  width: 8px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.pg-env-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pgh-neutral-muted);
}
.pg-env-tab.active .pg-env-tab-count {
  background: rgb(255 255 255 / 22%);
}

.pg-env-search { flex: 0 1 240px; }
.pg-env-q {
  width: 100%;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--pgh-fg);
  background: var(--pgh-canvas);
  border: 1px solid var(--pgh-border);
  border-radius: 6px;
}
.pg-env-q:focus {
  outline: none;
  border-color: var(--pgh-accent);
  box-shadow: 0 0 0 3px rgb(var(--pgh-accent-rgb) / 30%);
}

/* Distintivo del environment, delante del nombre. */
.pg-env-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--pgh-border);
  background: var(--pgh-canvas-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pgh-fg-muted);
  vertical-align: middle;
}
.pg-env-badge-main { color: var(--pgh-fg); }
.pg-env-badge-sep { opacity: 0.5; }

.pg-env-hidden { display: none !important; }

.pg-env-empty {
  margin: 0;
  padding: 16px 0 0;
  color: var(--pgh-fg-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------
   9. Login

   Solo presentacion. Que metodos de acceso se ofrecen se controla en
   app.ini (ver custom/templates/user/auth/signin.tmpl), no aqui.
   ------------------------------------------------------------ */

.pg-signin {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 7vh, 4.5rem) 1rem 3rem;
}

.pg-signin-wrap {
  width: 100%;
  max-width: 340px;
}

.pg-signin-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  /* El wordmark del lockup usa currentColor: sigue al tema. */
  color: var(--pgh-fg);
}
.pg-signin-brand .prism-logo {
  height: 58px;
  width: auto;
}

/* Gitea maqueta esto como cabecera + segmento "attached". Aqui es una sola
   tarjeta, con el titulo suelto encima. */
.pg-signin .ui.container.fluid { width: 100%; padding: 0; }

.pg-signin .ui.top.attached.header {
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: var(--pgh-fg);
}

.pg-signin .ui.attached.segment {
  margin: 0;
  padding: 16px;
  background: var(--pgh-canvas-subtle);
  border: 1px solid var(--pgh-border);
  border-radius: 6px;
}

/* Campos */
.pg-signin .ui.form .field { margin-bottom: 16px; }
.pg-signin .ui.form label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pgh-fg);
}
.pg-signin .ui.form input[type="text"],
.pg-signin .ui.form input[type="password"] {
  width: 100%;
  padding: 5px 12px;
  min-height: 32px;
  font-size: 14px;
  color: var(--pgh-fg);
  background: var(--pgh-canvas);
  border: 1px solid var(--pgh-border);
  border-radius: 6px;
}
.pg-signin .ui.form input[type="text"]:focus,
.pg-signin .ui.form input[type="password"]:focus {
  outline: none;
  border-color: var(--pgh-accent);
  box-shadow: 0 0 0 3px rgb(var(--pgh-accent-rgb) / 30%);
}

/* "Olvidaste la contraseña" alineado a la derecha de su etiqueta */
.pg-signin .ui.form .field a {
  font-size: 12px;
  font-weight: 400;
  color: var(--pgh-accent);
  text-decoration: none;
}
.pg-signin .ui.form .field a:hover { text-decoration: underline; }

.pg-signin .inline.field .ui.checkbox label {
  font-weight: 400;
  font-size: 14px;
}

/* El boton primario ya es verde por la seccion 3; aqui solo el tamano. */
.pg-signin .ui.primary.button {
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Bloque de registro: tarjeta aparte, como en GitHub. */
.pg-signin .ui.container.fluid + .ui.container.fluid { margin-top: 16px; }
.pg-signin .ui.attached.segment.header.top {
  max-width: none;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--pgh-fg-muted);
}
.pg-signin .ui.attached.segment.header.top .field { margin: 0; }
.pg-signin .ui.attached.segment.header.top a { color: var(--pgh-accent); }

.pg-signin .divider.divider-text {
  margin: 16px 0;
  color: var(--pgh-fg-muted);
  font-size: 12px;
}

/* ------------------------------------------------------------
   10. Flujo de autenticacion sin cabecera

   No se puede usar .page-content.user como gancho: esa clase la
   comparten perfil, notificaciones y paquetes, que si necesitan la
   cabecera. Van las clases propias de cada pagina de auth.
   ------------------------------------------------------------ */

body:has(.page-content.user.signin) #navbar,
body:has(.page-content.user.forgot.password) #navbar,
body:has(.page-content.user.reset.password) #navbar,
body:has(.page-content.user.activate) #navbar,
body:has(.page-content.user.link-account) #navbar,
body:has(.page-content.user.signin) #pg-drawer,
body:has(.page-content.user.forgot.password) #pg-drawer,
body:has(.page-content.user.reset.password) #pg-drawer,
body:has(.page-content.user.activate) #pg-drawer,
body:has(.page-content.user.link-account) #pg-drawer,
body:has(.page-content.user.signin) #pg-drawer-backdrop,
body:has(.page-content.user.forgot.password) #pg-drawer-backdrop,
body:has(.page-content.user.reset.password) #pg-drawer-backdrop,
body:has(.page-content.user.activate) #pg-drawer-backdrop,
body:has(.page-content.user.link-account) #pg-drawer-backdrop {
  display: none;
}

/* El logo enlaza al inicio: sin cabecera es la unica via de vuelta. */
.pg-signin-brand { text-decoration: none; }
.pg-signin-brand:hover { opacity: 0.85; }