/* ===========================
   COLORES INSTITUCIONALES MIRO
   =========================== */

/* Variables de color que usa app.css */
:root {
  --color-principal: #03687a !important;
  --color-hover: #03687a !important;
  --color-secundario: #03687a !important;
  --color-secundario-hover: #03687a !important;
  --color-texto: #ffffff !important;

  /* Variables de marca que vimos en DevTools */
  --pf-brand: #03687a !important;
  --miro-primary: #03687a !important;
}

/* Header en TODA la app (inicio, login, register, dashboard) */
.navbar,
.navbar.navbar-laravel,
.navbar.navbar-expand,
.navbar.navbar-dark,
.navbar.bg-success,
.navbar.bg-primary,
.site-header,
.header {
  background-color: #03687a !important;
  background-image: none !important;
  border-color: #03687a !important;
}

/* Texto e íconos del header en blanco */
.navbar a,
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .nav-link span,
.navbar .navbar-text,
.navbar svg,
.navbar i {
  color: #464E4D !important;
  fill: #ffffff !important;
}

/* Fondo general blanco para que no se vea banda verde rara */
html,
body {
  background-color: #ffffff !important;
}
/* Colores institucionales Miro / Systeck */

:root {
  --color-principal: #03687a !important;
  --color-hover: #03687a !important;
  --color-secundario: #03687a !important;
  --color-secundario-hover: #03687a !important;
  --color-texto: #ffffff !important;

  --pf-brand: #03687a !important;
  --miro-primary: #03687a !important;
}

/* Header global (incluye /i/web) */
.navbar,
.navbar.navbar-laravel,
.navbar.navbar-expand,
.navbar.navbar-dark,
.navbar.bg-success,
.navbar.bg-primary {
  background-color: #03687a !important;
  background-image: none !important;
  border-color: #03687a !important;
}

/* Texto e íconos del header en blanco */
.navbar a,
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar svg,
.navbar i {
  color: #464E4D !important;
  fill: #ffffff !important;
}
/* ==============
   LOGO PERSONALIZADO SYSTECK PARA EL HEADER
   ============== */

/* Contenedor del logo en el header */
.navbar .navbar-brand,
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}


/* Insertamos tu logo */
.navbar .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 34px;      /* Puedes ajustar tamaño */
    height: 34px;
    background-image: url('/img/logo-blanco.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* ==========================
   QUITAR LOGO MULTICOLOR
   ========================== */

/* Ocultar el <img> original del logo de Pixelfed */
.navbar .navbar-brand img,
.navbar-brand img {
    display: none !important;
}

/* Ya tienes esto, pero reforzamos el logo-blanco */
.navbar .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 38px;   /* Ajusta si quieres más grande o más chico */
    height: 38px;
    background-image: url('/img/logo-blanco.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* ====== Texto blanco SOLO en el header, no en el menú ====== */
.metro-nav.navbar,
.metro-nav.navbar .navbar-brand,
.metro-nav.navbar .navbar-nav > .nav-item > .nav-link,
.metro-nav.navbar .navbar-nav > .nav-item > .navbar-text,
.metro-nav.navbar .navbar-nav > .nav-item > .nav-link > svg,
.metro-nav.navbar .navbar-nav > .nav-item > .nav-link > i {
  color: #ffffff !important;
}

/* ====== Estilo del dropdown de usuario ====== */
.metro-nav .dropdown-menu {
  background-color: #ffffff !important;
  color: #343a40 !important;
}

/* Links dentro del dropdown */
.metro-nav .dropdown-menu .nav-item .nav-link,
.metro-nav .dropdown-menu .dropdown-item {
  color: #343a40 !important;
  font-weight: 500;
}

/* Hover en las opciones del dropdown */
.metro-nav .dropdown-menu .nav-item .nav-link:hover,
.metro-nav .dropdown-menu .dropdown-item:hover {
  background-color: #f1f3f5 !important;
  color: #03687a !important;
}