/* ============================================================
   Meca Consultores - Tema de marca para Forgejo v15
   Usa las variables CSS de Forgejo para ser compatible con
   los modos claro y oscuro automaticamente.
   Paleta: #102060 (azul profundo) | #2060f0 (azul) | #10b0f0 (cian)
   ============================================================ */

/* ---------- MODO CLARO: escala primaria en azul Meca ---------- */
:root {
  --color-primary: #2060f0;
  --color-primary-contrast: #ffffff;

  --color-primary-dark-1: #1a56d6;
  --color-primary-dark-2: #164cbc;
  --color-primary-dark-3: #1242a2;
  --color-primary-dark-4: #103888;
  --color-primary-dark-5: #0d2e6e;
  --color-primary-dark-6: #0a2454;
  --color-primary-dark-7: #081a3a;

  --color-primary-light-1: #3674f4;
  --color-primary-light-2: #4c88f6;
  --color-primary-light-3: #629cf8;
  --color-primary-light-4: #78b0fa;
  --color-primary-light-5: #8ec4fb;
  --color-primary-light-6: #a4d8fd;
  --color-primary-light-7: #bae4fe;

  --color-primary-alpha-10: #2060f019;
  --color-primary-alpha-20: #2060f033;
  --color-primary-alpha-30: #2060f04b;
  --color-primary-alpha-40: #2060f066;
  --color-primary-alpha-50: #2060f080;
  --color-primary-alpha-60: #2060f099;
  --color-primary-alpha-70: #2060f0b3;
  --color-primary-alpha-80: #2060f0cc;
  --color-primary-alpha-90: #2060f0e1;

  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);
  --color-accent: #10b0f0;
  --color-small-accent: #8ec4fb;

  /* Barra de navegacion y cabecera corporativas */
  --color-nav-bg: #0e1a45;
  --color-nav-hover-bg: #1a3170;
  --color-header-wrapper: #f3f7ff;
  --color-footer: #eef3fc;
}

/* ---------- MODO OSCURO: escala primaria clara sobre fondos oscuros ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #5b95f7;
    --color-primary-contrast: #0b1226;

    --color-primary-dark-1: #74a6f9;
    --color-primary-dark-2: #8db7fb;
    --color-primary-dark-3: #a6c8fc;
    --color-primary-dark-4: #bfd9fe;
    --color-primary-dark-5: #d8eafe;
    --color-primary-dark-6: #ecf4ff;
    --color-primary-dark-7: #f5faff;

    --color-primary-light-1: #4384f0;
    --color-primary-light-2: #2b72e0;
    --color-primary-light-3: #2060f0;
    --color-primary-light-4: #1a52d4;
    --color-primary-light-5: #1645b8;
    --color-primary-light-6: #133a9c;
    --color-primary-light-7: #102f80;

    --color-primary-alpha-10: #5b95f719;
    --color-primary-alpha-20: #5b95f733;
    --color-primary-alpha-30: #5b95f74b;
    --color-primary-alpha-40: #5b95f766;
    --color-primary-alpha-50: #5b95f780;
    --color-primary-alpha-60: #5b95f799;
    --color-primary-alpha-70: #5b95f7b3;
    --color-primary-alpha-80: #5b95f7cc;
    --color-primary-alpha-90: #5b95f7e1;

    --color-primary-hover: var(--color-primary-dark-1);
    --color-primary-active: var(--color-primary-dark-2);
    --color-accent: #10b0f0;
    --color-small-accent: #a6c8fc;

    --color-nav-bg: #0b132f;
    --color-nav-hover-bg: #1a3170;
    --color-header-wrapper: #0e1730;
    --color-footer: #0b1226;
  }
}

/* ============================================================
   BARRA DE NAVEGACION con identidad Meca (degradado corporativo)
   ============================================================ */
#navbar {
  background: linear-gradient(90deg, #0b132f 0%, #12245e 45%, #1a44c0 100%) !important;
  border-bottom: 1px solid rgba(16, 176, 240, 0.35) !important;
  box-shadow: 0 2px 10px rgba(6, 12, 40, 0.35) !important;
}

/* Texto de la barra siempre claro (funciona en ambos modos) */
#navbar .item,
#navbar .ui.menu .item,
#navbar a.item,
#navbar .ui.secondary.menu .item,
#navbar .navbar-left .item {
  color: #dbe7ff !important;
  transition: color 0.15s ease, background 0.15s ease;
}

#navbar .item:hover,
#navbar .ui.menu .item:hover,
#navbar a.item:hover,
#navbar .ui.secondary.menu .item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
}

/* Elemento activo resaltado en cian Meca */
#navbar .item.active,
#navbar .ui.menu .item.active,
#navbar .ui.secondary.menu .item.active {
  color: #ffffff !important;
  background: rgba(16, 176, 240, 0.18) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 -2px 0 #10b0f0;
}

/* Iconos y svg de la barra */
#navbar svg,
#navbar .icon,
#navbar i.icon {
  color: #bcd4ff !important;
  fill: #bcd4ff !important;
}

/* Input de busqueda dentro de la barra */
#navbar input,
#navbar .ui.input > input {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
#navbar input::placeholder,
#navbar .ui.input > input::placeholder {
  color: #a9c2ea !important;
}

/* Dropdowns de la barra (menus desplegables) mantienen fondo del tema */
#navbar .menu .item.active,
#navbar .dropdown .menu .item {
  color: var(--color-text) !important;
}
#navbar .dropdown .menu {
  background: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  #navbar .dropdown .menu {
    background: #1d2634 !important;
  }
}

/* ============================================================
   PIE DE PAGINA
   ============================================================ */
footer,
footer.ui.vertical.segment {
  background: #0b132f !important;
  color: #c7d8f5 !important;
  border-top: 1px solid rgba(16, 176, 240, 0.25) !important;
}
footer a,
footer.ui.vertical.segment a {
  color: #7ec8ff !important;
}
footer a:hover,
footer.ui.vertical.segment a:hover {
  color: #10b0f0 !important;
}
footer svg, footer .icon {
  color: #7ea6e0 !important;
  fill: #7ea6e0 !important;
}

/* ============================================================
   AJUSTES FINOS DE MARCA
   ============================================================ */
/* Logo del header con tamano controlado */
#navbar .brand img.logo,
#navbar .logo img,
#navbar img.logo {
  max-height: 30px !important;
  width: auto !important;
}

/* Boton primario con degradado sutil */
.ui.primary.button:not(.basic),
.ui.green.button:not(.basic) {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.06));
}

/* Pestañas activas y navegacion de repositorios */
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Enlaces del contenido con acento Meca */
.markup a:hover,
.repository .content a:hover {
  color: var(--color-primary-light-1) !important;
}

/* Barra de progreso de contribuciones en azul Meca */
.contribution-activity .bar,
#contributions-graph rect {
  fill: var(--color-primary) !important;
}

/* Seleccion de texto */
::selection {
  background: var(--color-primary-alpha-40);
}
/* ============================================================
   PULIDO PROFESIONAL
   ============================================================ */
/* Tarjetas y segmentos con esquinas suaves y borde de marca */
.ui.segment,
.ui.card,
.fancy-card {
  border-radius: 10px !important;
}

/* Resaltado de filas/secciones al pasar el mouse */
.flex-item-title a:hover,
.repository .content a:hover,
.ui.list .item:hover {
  color: var(--color-primary) !important;
}

/* Foco de inputs y botones en color de marca */
.ui.input > input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-primary-alpha-20) !important;
  outline: none !important;
}

/* Botones con esquinas suaves */
.ui.button {
  border-radius: 8px !important;
}

/* Etiquetas (labels) con esquinas suaves */
.ui.label {
  border-radius: 6px !important;
}

/* Barra de desplazamiento discreta con acento de marca */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-alpha-50) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-primary-alpha-40);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-alpha-70);
}

/* Badges de conteo en color de marca */
.ui.label.notification_count,
.ui.primary.labels .label {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Encabezado de secciones del dashboard */
.dashboard .ui.header,
.flex-item-title,
.ui.header .icon {
  color: var(--color-text) !important;
}