/* ==========================================================================
   Capa visual de git.tomasfirbeda.com

   Se carga ENCIMA del tema de Gitea desde templates/custom/header.tmpl. No
   reemplaza ningún archivo de Gitea: sacando ese header.tmpl vuelve todo al
   aspecto original, y una actualización de Gitea no pisa nada de acá.

   Criterio: /home/tomas/services/CLAUDE.md (Refactoring UI). Los tres
   problemas que se atacan, en orden de impacto:

   1. FONDO NEGRO PLANO. El tema oscuro por defecto usa casi negro puro para
      todo, así que los paneles no se despegan del fondo y la pantalla se lee
      como una sola masa. Acá el fondo baja a un gris azulado y los paneles
      suben: más claro que el fondo se siente elevado, que es la herramienta
      de profundidad más barata que hay.
   2. TODO PESA IGUAL. En el feed, el autor (siempre el mismo), la acción, el
      repo y la hora tenían el mismo peso, y encima el autor y el repo iban
      los dos en azul. Acá se resalta apagando: la hora y el "hizo push a" se
      van al fondo, el repo queda legible.
   3. LOS REPOS ERAN LO CHICO. Son tres y son lo importante de la instancia, y
      estaban en una cajita al costado. Se les da aire, alto de fila y peso.

   Todo en HSL y no en hex suelto, para poder mover luminosidad entre estados
   sin inventar un color nuevo cada vez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta
   --------------------------------------------------------------------------
   Gitea expone su tema como variables CSS, así que redefinirlas recolorea
   TODA la aplicación de forma coherente, en vez de perseguir selector por
   selector. Se cubren los dos caminos por los que puede llegar el modo
   oscuro: `gitea-auto` siguiendo al sistema, y `gitea-dark` elegido a mano.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root[data-theme="gitea-auto"] { --fb-activo: 1; }
}
:root[data-theme="gitea-dark"] { --fb-activo: 1; }

:root[data-theme="gitea-dark"],
:root[data-theme="gitea-auto"] {
  /* Escala de superficies: fondo → panel → cabecera de panel. Cada escalón
     sube luminosidad, no baja: lo más claro se lee como lo más cercano. */
  --fb-fondo: hsl(220 16% 8%);
  --fb-panel: hsl(220 15% 11%);
  --fb-panel-alto: hsl(220 14% 14%);
  --fb-borde: hsl(220 12% 19%);
  --fb-borde-suave: hsl(220 12% 15%);

  /* Texto en cuatro escalones. El salto entre el primero y el último es lo
     que crea la jerarquía sin cambiar ni un tamaño de letra. */
  --fb-texto: hsl(220 15% 93%);
  --fb-texto-2: hsl(220 10% 70%);
  --fb-texto-3: hsl(220 9% 55%);
  --fb-texto-4: hsl(220 8% 44%);

  --fb-acento: hsl(212 92% 66%);
  --fb-acento-suave: hsl(212 92% 66% / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="gitea-auto"] {
    --color-body: var(--fb-fondo);
    --color-box-body: var(--fb-panel);
    --color-box-body-highlight: var(--fb-panel-alto);
    --color-box-header: var(--fb-panel-alto);
    --color-nav-bg: hsl(220 16% 10%);
    --color-nav-hover-bg: hsl(220 14% 16%);
    --color-secondary-bg: var(--fb-panel-alto);
    --color-menu: var(--fb-panel);
    --color-card: var(--fb-panel);
    --color-markup-code-block: hsl(220 14% 15%);
    --color-text: var(--fb-texto);
    --color-text-light: var(--fb-texto-2);
    --color-text-light-1: var(--fb-texto-2);
    --color-text-light-2: var(--fb-texto-3);
    --color-text-light-3: var(--fb-texto-4);
    --color-secondary: hsl(220 12% 24%);
    --color-light-border: var(--fb-borde);
    --color-secondary-alpha-40: hsl(220 12% 24% / 0.4);
    --color-primary: var(--fb-acento);
    --color-primary-hover: hsl(212 92% 72%);
    --color-primary-light-4: hsl(212 92% 74%);
    --color-timeline: var(--fb-borde);
    --color-shadow: hsl(220 30% 2% / 0.5);
  }
}
:root[data-theme="gitea-dark"] {
  --color-body: var(--fb-fondo);
  --color-box-body: var(--fb-panel);
  --color-box-body-highlight: var(--fb-panel-alto);
  --color-box-header: var(--fb-panel-alto);
  --color-nav-bg: hsl(220 16% 10%);
  --color-nav-hover-bg: hsl(220 14% 16%);
  --color-secondary-bg: var(--fb-panel-alto);
  --color-menu: var(--fb-panel);
  --color-card: var(--fb-panel);
  --color-markup-code-block: hsl(220 14% 15%);
  --color-text: var(--fb-texto);
  --color-text-light: var(--fb-texto-2);
  --color-text-light-1: var(--fb-texto-2);
  --color-text-light-2: var(--fb-texto-3);
  --color-text-light-3: var(--fb-texto-4);
  --color-secondary: hsl(220 12% 24%);
  --color-light-border: var(--fb-borde);
  --color-primary: var(--fb-acento);
  --color-primary-hover: hsl(212 92% 72%);
  --color-timeline: var(--fb-borde);
  --color-shadow: hsl(220 30% 2% / 0.5);
}

/* --------------------------------------------------------------------------
   2. Barra superior
   -------------------------------------------------------------------------- */

#navbar,
.page-header,
nav.navbar {
  border-bottom: 1px solid var(--fb-borde-suave);
  backdrop-filter: saturate(140%) blur(8px);
}
#navbar .item {
  border-radius: 8px;
  transition: background-color 0.14s ease, color 0.14s ease;
}

/* --------------------------------------------------------------------------
   3. Paneles
   --------------------------------------------------------------------------
   Sombra de dos capas y no de una: la grande y difusa hace de luz directa, la
   chica y oscura de sombra de contacto. Con una sola capa el panel flota sin
   apoyarse en ningún lado.
   -------------------------------------------------------------------------- */

.ui.segment,
.ui.card,
.ui.attached.segment,
.flex-list,
.ui.attached.header,
.repository .ui.segment,
.dashboard .ui.segment {
  border-radius: 12px !important;
  border-color: var(--fb-borde) !important;
}

.dashboard .ui.segment,
.ui.cards > .card,
.ui.card {
  box-shadow:
    0 1px 2px hsl(220 30% 2% / 0.4),
    0 8px 24px hsl(220 30% 2% / 0.28) !important;
}

/* Bordes pegados: cuando Gitea apila cabecera y cuerpo, el redondeo tiene que
   quedar sólo en los extremos o se ve una escalerita. */
.ui.attached.header:not(:last-child) { border-radius: 12px 12px 0 0 !important; }
.ui.attached.segment:not(:first-child) { border-radius: 0 0 12px 12px !important; }

/* --------------------------------------------------------------------------
   4. El feed de actividad
   --------------------------------------------------------------------------
   Era el bloque más denso de la pantalla: filas pegadas, separadores en cada
   una y cuatro cosas compitiendo por atención en cada línea.
   -------------------------------------------------------------------------- */

/* Aire en vez de líneas. Los separadores hairline en cada fila son ruido
   cuando el espacio ya alcanza para agrupar. */
.dashboard.feeds .news .flex-item,
.dashboard .flex-list .flex-item {
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--fb-borde-suave) !important;
  transition: background-color 0.14s ease;
}
.dashboard.feeds .news .flex-item:last-child { border-bottom: 0 !important; }
.dashboard.feeds .news .flex-item:hover { background: hsl(220 14% 13% / 0.6); }

/* La hora: es contexto, no contenido. Se va al último escalón de texto y
   baja de tamaño. */
.dashboard.feeds .flex-item .text.grey .time-since,
.dashboard.feeds relative-time,
.time-since {
  color: var(--fb-texto-4) !important;
  font-size: 0.86em;
}

/* El autor. En una instancia de una sola persona, el nombre se repite en
   TODAS las filas: es la definición de ruido. Se apaga y se le saca el color
   de enlace, que estaba compitiendo con el del repositorio. */
.dashboard.feeds .flex-item .flex-item-title > a:first-child {
  color: var(--fb-texto-2) !important;
  font-weight: 500;
}

/* El repositorio sí importa: es lo que uno busca al escanear el feed. */
.dashboard.feeds .flex-item .flex-item-title a[href*="/"]:not(:first-child) {
  font-weight: 600;
}

/* Los hashes de commit: monoespaciado más chico y apagado, que es lo que son.
   Ocupaban el mismo peso visual que el mensaje del commit. */
.dashboard.feeds .flex-item .commit-id,
.dashboard.feeds .flex-item code {
  font-size: 0.82em;
  color: var(--fb-texto-3) !important;
  background: hsl(220 14% 15%) !important;
  border-radius: 5px;
  padding: 1px 6px;
}

/* Los íconos de la derecha (rama, push, PR) eran del mismo gris que el texto
   y tiraban el ojo al margen. Un ícono sólido pesa más que el texto que
   acompaña, así que se compensa bajándole contraste, no tamaño. */
.dashboard.feeds .flex-item .flex-item-trailing .svg,
.dashboard.feeds .flex-item svg.svg {
  color: var(--fb-texto-4) !important;
  opacity: 0.75;
}

/* El calendario de contribuciones ocupa la mejor parte de la pantalla y casi
   siempre está vacío. No se esconde (es información), pero deja de gritar. */
#user-heatmap {
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
#user-heatmap:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   5. La lista de repositorios
   --------------------------------------------------------------------------
   Son tres y son el motivo de que la instancia exista. Estaban con menos
   presencia que el feed.
   -------------------------------------------------------------------------- */

#repo-list-container .flex-item,
.dashboard .repo-owner-name-list .flex-item {
  padding: 13px 16px !important;
  border-radius: 8px;
  transition: background-color 0.14s ease;
}
#repo-list-container .flex-item:hover {
  background: hsl(220 14% 16%);
}
#repo-list-container .flex-item .flex-item-title,
#repo-list-container .flex-item a.repo-title {
  font-size: 1.02em;
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* El candado de "privado": son TODOS privados, así que el ícono no
   distingue nada. Se apaga hasta que haga falta. */
#repo-list-container .flex-item .svg.octicon-lock {
  color: var(--fb-texto-4) !important;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   6. Tipografía
   --------------------------------------------------------------------------
   No se cambia la familia: se ajustan tamaños y pesos, que es donde estaba el
   problema. Los títulos de sección eran casi indistinguibles del cuerpo.
   -------------------------------------------------------------------------- */

body { -webkit-font-smoothing: antialiased; }

.ui.header,
.ui.attached.header,
.dashboard h2,
.dashboard h3 {
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Enlaces: no todos necesitan color propio. Los del cuerpo se distinguen por
   peso y por el subrayado al pasar el mouse, y el color se reserva para los
   que de verdad llevan a algún lado nuevo. */
a:hover { text-decoration: none; }
.dashboard.feeds a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   7. Detalles
   -------------------------------------------------------------------------- */

.ui.button {
  border-radius: 8px;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.ui.input > input,
.ui.form input[type="text"],
.ui.form input[type="password"] {
  border-radius: 8px;
  background: hsl(220 16% 9%) !important;   /* más oscuro que el panel: se lee hundido, como un campo */
  border-color: var(--fb-borde) !important;
}
.ui.input > input:focus {
  border-color: var(--fb-acento) !important;
  box-shadow: 0 0 0 3px var(--fb-acento-suave) !important;
}

/* El pie: es metadato de la instancia, no contenido. */
.page-footer,
footer .left-links,
footer .right-links {
  color: var(--fb-texto-4);
  font-size: 0.88em;
}

/* Barras de desplazamiento acordes al fondo, para que no aparezca una franja
   clara del navegador cortando el diseño. */
* { scrollbar-color: hsl(220 12% 24%) transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   8. Página de perfil
   --------------------------------------------------------------------------
   Tres correcciones sobre lo que se veía en la primera pasada:

   a) La foto se comía la entrada. El ojo iba primero a una imagen enorme y
      recién después a los proyectos, que son el contenido. La columna baja
      ~22% y la foto deja de ser lo primero por tamaño.
   b) Los proyectos eran una tabla, que se lee como planilla administrativa.
      Pasan a tarjetas: una por proyecto, escaneables de un vistazo.
   c) La infraestructura estaba al mismo nivel que los proyectos siendo
      información secundaria. Ahora va plegada en un <details>.

   OJO CON LOS SELECTORES: el sanitizador de Markdown de Gitea BORRA el
   atributo `class`, así que las tarjetas no se pueden marcar con una clase.
   Se distinguen por estructura: los `div` sueltos dentro del README del perfil
   son tarjetas, y los que llevan `align` son bloques centrados (cabecera y
   pie). De ahí el `:not([align])`.
   -------------------------------------------------------------------------- */

/* --- a) la columna de la foto, más chica --- */
@media (min-width: 768px) {
  #profile-avatar-card {
    max-width: 240px;          /* venía de ~300px */
  }
  #profile-avatar img,
  #profile-avatar-card .ui.avatar,
  #profile-avatar-card img.avatar {
    max-width: 168px !important;
    height: auto !important;
    border-radius: 14px;
  }
}
#profile-avatar-card {
  box-shadow:
    0 1px 2px hsl(220 30% 2% / 0.4),
    0 8px 24px hsl(220 30% 2% / 0.28) !important;
}

/* --- b) tarjetas de proyecto --- */
#readme_profile { padding: 4px 2px; }

#readme_profile > div:not([align]) {
  background: var(--fb-panel-alto, hsl(220 14% 14%));
  border: 1px solid var(--fb-borde, hsl(220 12% 19%));
  border-radius: 12px;
  padding: 16px 18px 6px;
  margin: 0 0 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
#readme_profile > div:not([align]):hover {
  border-color: hsl(220 12% 28%);
  transform: translateY(-1px);
}

/* El nombre del proyecto es lo único que tiene que gritar. Se le saca el
   tamaño de h3 gigante y se le deja peso. */
#readme_profile > div:not([align]) h3 {
  margin: 0 0 4px !important;
  font-size: 1.12rem !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Descripción y dominio: dos escalones por debajo del título. */
#readme_profile > div:not([align]) p {
  margin: 0 0 8px !important;
  color: var(--fb-texto-2, hsl(220 10% 70%));
  font-size: 0.94rem;
}
/* La última línea es la de metadatos (rama · commit · CI): la más apagada. */
#readme_profile > div:not([align]) p:last-of-type {
  color: var(--fb-texto-4, hsl(220 8% 44%));
  font-size: 0.86rem;
}
#readme_profile code {
  background: hsl(220 16% 10%);
  border: 1px solid var(--fb-borde-suave, hsl(220 12% 15%));
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.86em;
}
/* `LIVE` al lado del título: es un estado, así que se distingue por color y no
   por un pictograma. */
#readme_profile > div:not([align]) h3 code {
  background: hsl(150 60% 40% / 0.16);
  border-color: hsl(150 55% 45% / 0.4);
  color: hsl(150 65% 62%);
  font-size: 0.62em;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 6px;
}

/* --- c) la infraestructura, plegada y discreta --- */
#readme_profile details {
  border: 1px solid var(--fb-borde-suave, hsl(220 12% 15%));
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 18px;
  background: transparent;
}
#readme_profile details > summary {
  cursor: pointer;
  color: var(--fb-texto-3, hsl(220 9% 55%));
  font-size: 0.9rem;
  list-style: none;
}
#readme_profile details > summary::after {
  content: " ›";
  transition: transform 0.15s ease;
  display: inline-block;
}
#readme_profile details[open] > summary::after { transform: rotate(90deg); }
#readme_profile details > summary:hover { color: var(--fb-texto, hsl(220 15% 93%)); }
#readme_profile details[open] { background: hsl(220 15% 11%); }

/* Cabecera y pie centrados: sin caja, que son texto y no bloques. */
#readme_profile > div[align="center"] { margin: 6px 0 22px; }
#readme_profile > div[align="center"] h1 {
  border-bottom: 0 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.02em;
}
#readme_profile > div[align="center"]:last-child { margin: 20px 0 0; opacity: 0.65; }