/* Write your css codes here */
.header img {
  max-height: 80px;
}
.navbar-brand.logo img {
  max-height: 80px;
}

/* ===== Variables globales ===== */
:root{
  --bg      : #e8eefc;    /* fondo global  (muy claro)       */
  --surface : #254093;    /* superficie tarjeta/tabs         */
  --shadow1 : #5e76b9;    /* luz superior izquierda           */
  --shadow2 : #5e76b9;    /* sombra inferior derecha          */
  --primary : #4f6bff;    /* color activo (texto y borde)     */
  --radius  : 8px;     /* border-radius de los tabs        */
  --pad-x   : 2.4rem;     /* padding horizontal de cada tab   */
  --height  : 3.4rem;     /* alto del contenedor de pestañas  */
}


/* ===== Contenedor principal ===== */
.neumorphic-tabs{
  display:inline-flex;
  gap:0;                       /* sin huecos entre etiquetas   */
  padding:.4rem;
  background:var(--surface);
  border-radius:var(--radius);

  height:var(--height);
}

/* ===== Ocultamos los radio ===== */
.neumorphic-tabs input{ display:none }

/* ===== Etiquetas de pestaña ===== */
.neumorphic-tabs .tab{
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--pad-x);
  min-width:8rem;
  font-size:1rem;
  font-weight:600;
  color:#fff;               /* texto inactivo                */
  border-radius:var(--radius);
  cursor:pointer; user-select:none;
  transition:all .25s ease;
}

/* Hover suave */
.neumorphic-tabs .tab:hover{ color:#6670a3 }

/* ===== Estado activo ===== */
#tab-buyer:checked + label,
#tab-seller:checked + label{
  box-shadow:                 /* reborde interior activo       */
    inset 2px 2px 4px var(--shadow2),
    inset -2px -2px 4px var(--shadow1);
  background:var(--surface);  /* mantiene el mismo fondo        */
}

/* ===== Foco accesible (teclado) ===== */
.neumorphic-tabs .tab:focus-visible{
  outline:2px dashed var(--primary);
  outline-offset:4px;
}